name='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>
最佳答案
仅仅因为表单控件被隐藏并不意味着它不是必需的。由于它是必需的,但隐藏了,浏览器无法将表单控件聚焦。
每个地方都有 .hide()
将其更改为 .hide().prop('required',false)
来解决您的问题。
关于javascript - 名称为...的无效表单控件不可聚焦,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42304472/