Недопустимый элемент управления формы с именем не фокусируется

Недопустимый элемент управления формы с именем = 'additional_here_about_other_field' не может быть сфокусирован. Этот код предназначен для поля выбора с четырьмя раскрывающимися списками. Требуется пара опций: #additional_here_about_other_field и #additional_who_is_your_orthodontist_field. Когда выбрано обязательное поле, вы должны ввести дополнительные данные в другое текстовое поле, которое будет отображаться/отображаться. Когда вы выбираете требуемую опцию, а затем переключаетесь на опцию, которая требуется или нет, и пытаетесь отправить форму, вы получаете ошибку «не фокусируется». Кажется, когда вы выбираете обязательное поле, а затем переключаетесь на другое поле, предыдущее обязательное поле, хотя и скрытое, все еще ожидает проверки?

jQuery(document).ready(function () {
	
	if(jQuery("#additional_here_about_other_field").length > 0){
		jQuery("#additional_here_about_other_field").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Other (please specify)'){ jQuery("#additional_here_about_other_field").show().prop('required',true); }
			else { jQuery("#additional_here_about_other_field").hide(); }
		});
	}
	if(jQuery("#additional_who_is_your_orthodontist").length > 0){
		jQuery("#additional_who_is_your_orthodontist").hide();
		jQuery("#additional_how_did_u_hear_about_harp").change(function(){
			if(jQuery(this).val() == 'Orthodontist Referral'){ jQuery("#additional_who_is_your_orthodontist").show().prop('required',true); }
			else { jQuery("#additional_who_is_your_orthodontist").hide(); }
		});
	}
});

HTML snippet


<select name="additional_how_did_u_hear_about_harp" id="additional_how_did_u_hear_about_harp" class="select " data-allow_clear="true" data-placeholder="How Did You Hear About The Harp?" >
	<option value=""  selected='selected'></option>
	<option value="Patient" >Patient</option>
	<option value="Orthodontist Referral" >Orthodontist Referral</option>
	<option value="Trade Show" >Trade Show</option>
	<option value="Mailer" >Mailer</option>
	<option value="Other (please specify)" >Other (please specify)</option>
</select>

<div class="clear"></div>
<p>		
	<input type="text" class="input-text " name="additional_here_about_other_field" id="additional_here_about_other_field" placeholder="Other (please specify)"   value=""  />
</p>
<div class="clear"></div>
<p>		
	<input type="text" class="input-text " name="additional_who_is_your_orthodontist" id="additional_who_is_your_orthodontist" placeholder="Who is your orthodontist?"   value=""  />
</p>
<div class="clear"></div>


javascript jquery
person Vim Bonsu    schedule 17.02.2017    source источник

Ответы (3)


arrow_upward
28
arrow_downward

Тот факт, что элемент управления формой скрыт, не означает, что он не требуется. И так как это требуется, но скрыто, браузер не может сфокусировать элемент управления формы.

В каждом месте, где у вас есть .hide(), измените его на .hide().prop('required',false), чтобы решить проблему.

person bassxzero    schedule 17.02.2017
comment
Что делать, если у вас есть несколько вкладок в форме (для нескольких языков). Как это исправить? Для каждого языка существует 6 входных данных, поэтому простое отображение их в одной форме сделало бы это очень длинным. - person nclsvh; 25.10.2017
comment
@nclsvh вам придется реализовать проверку формы самостоятельно, вместо того, чтобы полагаться на проверку браузера. Я предпочитаю этот метод, потому что он стандартизирует взаимодействие с пользователем во всех браузерах. - person bassxzero; 25.10.2017
comment
Верно, и наличие <input type="hidden"> скроет только ввод, а не метку и связанные с ней вещи. Это отстой! - person nclsvh; 25.10.2017

arrow_upward
2
arrow_downward

Удалите «требуется» из поля и используйте логику javascript, чтобы увидеть, требуется ли это или нет.

person Brennan James    schedule 07.10.2019

arrow_upward
0
arrow_downward

Во-первых, удалите обязательное из поля. Затем используйте этот код jQuery:

$('#your_input_or_select_id').prop('required',true);   //use this to add required while document ready
$('#your_input_or_select_id').removeAttr('required'); //use this to remove required whenever you want
person Ribaz    schedule 08.10.2020