Javascript 名称无效的表单控件...不可聚焦
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42304472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
An invalid form control with name...is not focusable
提问by Vim Bonsu
An invalid form control with name='additional_here_about_other_field' is not focusable.This code is for a select field with four dropdowns. A couple of the options are to be required: #additional_here_about_other_fieldand the #additional_who_is_your_orthodontist_field. When a required field is selected, you have to enter additional data in another text field that will show/unhide. When you select a required option and then switch to an option which is required or not and try to submit the form, you get the is not focusable error. It seems when you select a required field and then switch to another field, the previous required field although now hidden is still waiting to be validated?
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>回答by bassxzero
Just because a form control is hidden doesn't mean it isn't required. And since it is required, but hidden the browser can't focus the form control.
仅仅因为表单控件被隐藏并不意味着它不是必需的。并且由于它是必需的，但隐藏了浏览器无法聚焦表单控件。
Every place you have .hide()change it to .hide().prop('required',false)to fix your problem.
您将其.hide()更改到的每个地方都.hide().prop('required',false)可以解决您的问题。
回答by Brennan James
Remove "required" from the field, and use a javascript logic to see if it has been required or not.
从字段中删除“必需”，并使用 javascript 逻辑查看它是否是必需的。
