带有名称的无效表单控件...不可聚焦

Posted 2023-02-22

【中文标题】带有名称的无效表单控件...不可聚焦

【英文标题】：An invalid form control with name...is not focusable

【发布时间】：2017-07-07 08:46:55

【问题描述】：

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>

【问题讨论】：

对于那些在自定义元素和表单参与中找到此错误消息搜索结果的人，***.com/a/69684377

可能有解决方案

【参考方案1】：

表单控件被隐藏并不意味着它不是必需的。而且既然是必需的，但是隐藏了浏览器无法聚焦表单控件。

您拥有的每个.hide() 将其更改为.hide().prop('required',false) 以解决您的问题。

【讨论】：

如果表单中有多个选项卡（适用于多种语言）怎么办。你怎么能解决这个问题？每种语言有 6 个输入，因此仅以 1 种形式显示它们会很长。

@nclsvh 您必须自己实现表单验证，而不是依赖浏览器进行验证。我更喜欢这种方法，因为它标准化了所有浏览器的用户体验。

是的，<input type="hidden"> 只会隐藏输入，而不是标签和相关的东西。这太糟糕了！

【参考方案2】：

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

【参考方案3】：

首先，从字段中删除“必需”。然后使用这个 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