javascript - 当 Bootstrap 表单无效时，Jquery 验证器提交

Question

所以基本上，当表单有效时，它应该链接到一个表示成功的新页面。该部分工作正常。

但是，如果表单无效，表单仍然会提交，特别是我注意到，只要填写了所有三个字段，即使密码不匹配，表单也会提交。如果其中一个字段留空，那么它不会提交(正如它应该的那样)

我的验证函数是否有问题，我没有看到还是在 Bootstrap 中？

demo由于某种原因，演示在第二次点击时提交

jquery 验证

          $(document).ready(function() {
             $('#signin').validate({


        rules: {
            name: {
                required: true,
                name:  true
            },
            password: {
                required: true,
                rangelength:[8,12]
            },
         confirmPassword: {equalTo:'#password'},
         spam: "required"

        },


        messages:  {
            name: {
                required: "Please supply a Username."
            },  
            password: {
                required: 'Please type a password',
                rangelength: 'Password must be between 8 and 12 characters long.'
            },  
            confirmPassword: {
            equalTo: 'The passwords do not match.'
            }
        },  

      });
    });

HTML

      <div class="container">
          <div class="col-lg-6">
              <h2 class="form-signin-heading">Please sign in</h2>   
    <form  class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form">

      <div class="form-group">
        <label for="inputUsername" class=" required col-lg-2 control-label">UserName</label>
        <div class="col-lg-5">
          <input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus>
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword" class=" required col-lg-2 control-label">Password</label>
        <div class="col-lg-5">
          <input name="password" type="password" class="form-control" id="password" placeholder="Password">
        </div>
      </div>

      <div class="form-group">
        <label for="confirmPassword" class="col-lg-2 control-label">Confirm Password</label>
        <div class="col-lg-5">
          <input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password">
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" name="submit" id="submit" class="btn btn-default">SignIn</button>
        </div>
    </div>
    </div>
    </form>

Answer 1

好的，您需要删除无关的名称参数。

姓名:{ 必填:真实 ，名称:true },

规则:

:rules: {
            name: {
                required: true
            },
            password: {
                required: true,
                rangelength:[8,12]
            },
         confirmPassword: {equalTo:'#password'},
         spam: "required"

        },