JQuery.Validate 仅验证第一个字段

Question

我整天都在为 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>

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

我做错了什么？

Answer 1

jQuery 验证需要每个输入都有一个 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" />

JQuery.Validate 仅验证第一个字段

JQuery.Validate only validates first field

javascript

jquery

jquery-validate