名为“”的表单控件无效。。。不可聚焦

Question

名为“additional\u here\u about\u other\u field”的无效表单控件不可聚焦。此代码用于具有四个下拉列表的选择字段。需要两个选项：#此处附加#u关于(其他)字段和#附加#谁是(你的)矫正医生(字段)。选择必填字段时，必须在另一个文本字段中输入其他数据，该字段将显示/取消隐藏。当您选择一个必需的选项，然后切换到一个必需或非必需的选项并尝试提交表单时，您会得到“不可聚焦”错误。似乎当您选择一个必填字段，然后切换到另一个字段时，以前的必填字段（尽管现在隐藏）仍在等待验证？

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>

Answer 1

首先，从字段中删除“required”。然后使用以下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

Answer 2

从字段中删除“required”，并使用javascript逻辑查看是否需要它。

Answer 3

表单控件被隐藏并不意味着不需要它。而且由于它是必需的，但是隐藏的浏览器不能集中表单控件。

每个地方你有。隐藏（）将其更改为。隐藏（）。prop（'必需'，false）来解决您的问题。