JQuery.Validate 仅验证第一个字段 [重复]答案

【问题标题】：JQuery.Validate only validates first field [duplicate]JQuery.Validate 仅验证第一个字段 [重复]
【发布时间】：2018-11-19 18:20:56
【问题描述】：

我整天都在为一个 JQuery 验证问题而苦苦挣扎。它只验证第一个字段。

我已经设法在这里重现它：

$(document).ready(function() {
  $('#go').click(function() {
    
    console.log('go clicked');
    
    if ($('#detailsForm').valid()) {
      alert('if you see this then the form is valid.');
    }

  });
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="jquery-validate@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
    <script data-require="jquery-validate@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>This doesn't work :(</h1>
    
     <form id="detailsForm">

        <div class="row guttered-bottom">

            <div class="col-md-6 col-xs-12">


                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <br />
                        First Name<div style="color:#E320C9">*</div>
                        <div class="input-container">
                            <input id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
                        </div>
                    </div>
                </div>

           <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <br />
                        Last Name<div style="color:#E320C9">*</div>
                        <div class="input-container">
                            <input id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
                        </div>
                    </div>
                </div>

            </div>

         
        </div>


    </form>
    
    <br>
    
    <button id="go">CLICK ME! </button>
  </body>

</html>

重现步骤：单击按钮并观察第一个字段（名字）出现的验证消息。输入名字并再次单击该按钮。请注意，即使两个字段都是必需的，表单似乎也可以验证。

我做错了什么？

【问题讨论】：

我不认为这是完全重复的。类似的是，但不是重复的问题。
要让这个插件工作，表单输入元素需要有唯一的name 属性。如果它们不是唯一的或丢失，则症状正是您所描述的。验证是由按钮手动触发还是由.valid() 方法以编程方式触发都无关紧要。

标签： javascript jquery jquery-validate

【解决方案1】：

jQuery Validate 需要每个输入都有一个name 属性。没有这个，它就无法正确创建用于存储验证结果的输入对象。

只需为每个输入添加一个唯一的名称，您应该会很好：

<input name="ReserveFirstName" id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />

<input name="ReserveLastName" id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />

【讨论】：

Pat 我希望我早点问这个而不是挣扎！太感谢了！再过 10 分钟，我无法接受这个答案。
类似地，表单不会提交没有名称的输入，这也是它们被忽略以进行验证的原因
@charlietfl 很高兴知道，但在这种情况下不应该影响我。谢谢，尽管我为此投了你的票。
Np @PrimeByDesign - 几年前我也是这样。
验证也会忽略禁用的字段。不适用于您的问题，仅供参考。