Question

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

但是，如果表单无效，表单仍然提交，特别是我注意到，只要表单中的所有三个字段都填写即使密码不匹配也是如此。如果其中一个字段留空，则表示不提交（应该如此）

我的验证功能是否有问题我没有看到或是否在引导程序中？

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"

        },

当引导程序表单无效时，Jquery验证程序提交

1 个答案: