@Valery23

Почему не проходит проверку «Обязательное поле» в форме обратной связи WordPress?

Есть сайт на WordPress. Для формы обратной связи использую Caldera Form. В форме требуются поля dropdown. При помощи js я заменил стандартный select и option для правки css. Но теперь, когда выбираю в двух dropdown значения, считается только введенное значение последнего dropdown, а первый dropdown пишет, что поле не заполнено. Может кто то знает в чем причина?

<script>
	// Select
	$('#fld_3505334_3').each(function(){
		// Variables
		var $this = $(this),
			selectOption = $this.find('option'),
			selectOptionLength = selectOption.length,
			selectedOption = selectOption.filter(':selected'),
			dur = 500;

		$this.hide();
		// Wrap all in select box
		$this.wrap('<div class="select"></div>');
		// Style box
		$('<div>',{
			class: 'select__gap',
			text: 'Телефон/Мессенджер'
		}).insertAfter($this);
		
		var selectGap = $this.next('.select__gap'),
			caret = selectGap.find('.caret');
		// Add ul list
		$('<ul>',{
			class: 'select__list'
		}).insertAfter(selectGap);		

		var selectList = selectGap.next('.select__list');
		// Add li - option items
		for(var i = 0; i < selectOptionLength; i++){
			$('<li>',{
				class: 'select__item',
				html: $('<span>',{
					text: selectOption.eq(i).text()
				})				
			})
			.attr('data-value', selectOption.eq(i).val())
			.appendTo(selectList);
		}
		// Find all items
		var selectItem = selectList.find('li');

		selectList.slideUp(0);
		selectGap.on('click', function(){
			if(!$(this).hasClass('on')){
				$(this).addClass('on');
				selectList.slideDown(dur);

				selectItem.on('click', function(){
					var chooseItem = $(this).data('value');

					$('select').val(chooseItem).attr('selected', 'selected');
					selectGap.text($(this).find('span').text());

					selectList.slideUp(dur);
					selectGap.removeClass('on');
				});
				
			} else {
				$(this).removeClass('on');
				selectList.slideUp(dur);
			}
		});		

	});
</script>

<script>
	// Select
	$('#fld_3447084_3').each(function(){
		// Variables
		var $this = $(this),
			selectOption = $this.find('option'),
			selectOptionLength = selectOption.length,
			selectedOption = selectOption.filter(':selected'),
			dur = 500;

		$this.hide();
		// Wrap all in select box
		$this.wrap('<div class="select"></div>');
		// Style box
		$('<div>',{
			class: 'select__gap',
			text: 'Специалист'
		}).insertAfter($this);
		
		var selectGap = $this.next('.select__gap'),
			caret = selectGap.find('.caret');
		// Add ul list
		$('<ul>',{
			class: 'select__list'
		}).insertAfter(selectGap);		

		var selectList = selectGap.next('.select__list');
		// Add li - option items
		for(var i = 0; i < selectOptionLength; i++){
			$('<li>',{
				class: 'select__item',
				html: $('<span>',{
					text: selectOption.eq(i).text()
				})				
			})
			.attr('data-value', selectOption.eq(i).val())
			.appendTo(selectList);
		}
		// Find all items
		var selectItem = selectList.find('li');

		selectList.slideUp(0);
		selectGap.on('click', function(){
			if(!$(this).hasClass('on')){
				$(this).addClass('on');
				selectList.slideDown(dur);

				selectItem.on('click', function(){
					var chooseItem = $(this).data('value');

					$('select').val(chooseItem).attr('selected', 'selected');
					selectGap.text($(this).find('span').text());

					selectList.slideUp(dur);
					selectGap.removeClass('on');
				});
				
			} else {
				$(this).removeClass('on');
				selectList.slideUp(dur);
			}
		});		

	});
</script>


ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.select {
    display: inline-block;
    vertical-align: top; 
    width: 100%;
}

.select-wrap {
	max-width: 700px;
	width: 100%;
	margin: 20px auto;
}

.select-wrap select {
	margin: 20px;
}

.select__gap {
	height: 34px;
    cursor: pointer;
    position: relative;
    color: #A1A1A1;
    border-bottom: 1px solid #D9D9D9 !important;
    padding: 6px 0px 6px 0px !important;
}

.select__list {
    width: 330px;
    border-radius: 0px 0px 20px 20px;
    margin: 0px 0;
    position: absolute;
    background: #fff;
    z-index: 9999;
}

.select__list.on {
	display: block;
}

.select__item span {
	display: block;
	cursor: pointer;
}

.select__gap:after {
	content: url(/wp-content/uploads/2020/09/dropdown.svg);
	display: block;
    width: 12px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: 0%;

	-webkit-transition: all .27s ease-in-out;
	     -o-transition: all .27s ease-in-out;
	        transition: all .27s ease-in-out;

	-webkit-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
}

.on.select__gap:after {
	-webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}


<select name="fld_3505334" value="" data-field="fld_3505334" class="form-control parsley-error" id="fld_3505334_3" required="required" aria-labelledby="fld_3505334Label" style="display: none;" selected="selected" data-parsley-id="9" aria-describedby="parsley-id-9" aria-invalid="true">
<option value="" disabled="" selected="">Телефон/Мессенджер </option>
<option value="Телефон" data-calc-value="Телефон">Телефон</option>
<option value="Viber" data-calc-value="Viber">Viber</option>
<option value="WhatsApp" data-calc-value="WhatsApp">WhatsApp</option>
<option value="Telegram" data-calc-value="Telegram">Telegram	</option>
</select>

<select name="fld_3447084" value="" data-field="fld_3447084" class="form-control parsley-success" id="fld_3447084_3" required="required" aria-labelledby="fld_3447084Label" style="display: none;" selected="selected" data-parsley-id="13">
<option value="" disabled="" selected="">Специалист</option>
<option value="Имплантолог" data-calc-value="Имплантолог">Имплантолог</option>
<option value="Хирург" data-calc-value="Хирург">Хирург</option>
<option value="Ортопед" data-calc-value="Ортопед">Ортопед</option>
<option value="Терапевт" data-calc-value="Терапевт">Терапевт</option>
<option value="Ортодонт" data-calc-value="Ортодонт">Ортодонт</option>
</select>
  • Вопрос задан
  • 16 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы