遍历每个输入字段时验证必填字段答案

【问题标题】：Validate required fields when traversing through each input fields遍历每个输入字段时验证必填字段
【发布时间】：2020-02-04 22:58:15
【问题描述】：

我有一些动态生成的 html 输入控件。一些控件具有必需的属性。当我遍历这些字段时，我想关注空字段并进行验证。但我想避免隐藏字段。我只需要添加验证所需的属性。还要避免隐藏字段。这是我试过的代码。

$("input , select, textarea").each(function() {
     var element = $(this)
     if (element.val() == "")
           $(this).focus()
           return false
 });

【问题讨论】：

要创建一个包含一个或多个指令的块，例如聚焦输入控件并在其中一个输入控件为空时退出 .each()，您必须将这些指令包裹在花括号 { } .
能否请您发布至少一个输入字段的 HTML 代码？
也许将您的选择器更改为input[required]:visible？
您的隐藏字段是否“必填”？因为这会导致一系列其他问题

标签： javascript jquery

【解决方案1】：

回答

由于验证的工作原理 - 特别是在 Chrome 中，您需要绕过表单的正常验证。为此，您需要在form 标记上设置属性novalidate，然后为您的submit 事件提供自定义验证。

为什么？

默认情况下，Chrome 会在提交之前验证表单——这是一个很酷的想法——但不幸的是，这个过程在实践中失败了，因为它不允许hidden 元素出现在表单中。事实上，它会引发错误（name='' 的无效表单控件不可聚焦）。如果不深入了解我个人对这个设计缺陷的看法，它可能是一个令人沮丧的障碍，直到你遇到它才会知道。

其次，在提交 required 和 hidden 的字段时有时会出现问题，可能会导致错误，或者静默地阻止表单。要解决此问题，您可以在提交之前删除 required 属性，然后在自定义验证后重新应用到这些元素。

示例：

$( "form" )
	.on( "submit", function( e ) {
	e.preventDefault();
	let hidden_required = [],
		invalid_form = false;
	$( "form" )
		.children( "input:text, select, textarea" )
		.each( function( i, ele ) {
		let prop = ele.tagName === "textarea" ? "textContent" : "value";
		if ( ele.required && ele[ prop ] == "" ) {
			if ( ele.classList.contains( "hidden" ) ) {
				ele.required = false;
				hidden_required.push( ele );
			} else {
				ele.focus();
				invalid_form = true;
			}
		}
	} );
	if ( !invalid_form ) {
		// do ajax submit
		alert( "valid form" );
	} else {
		// do alert or whatever
	}
	hidden_required.forEach( function( ele ) {
		ele.required = true;
	} );
	return false;
} );

.hidden {
visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form novalidate>
<input /><br>
<input required /><br>
<textarea></textarea><br>
<input class="hidden" required>
<input class="hidden">
<input type="submit"  value="submit">
</form>

【讨论】：

【解决方案2】：

您可以使用attr 函数获取您的HTML 的input 标签的详细信息，例如：$(this).attr('hidden') 将返回当前输入标签的属性值。

查看fiddle 的工作示例。

【讨论】：