Jquery验证器在引导表单无效时提交

Jquery validator submits when bootstrap form is invalid

本文关键字:表单 无效 提交 验证 Jquery      更新时间:2023-09-26

因此,基本上,当表单有效时,它应该链接到一个显示成功的新页面。那部分很好用。

然而,如果表格无效,表格仍然会提交,特别是我注意到,只要表格中的所有三个字段都填写了,即使密码不匹配,也会提交。如果其中一个字段为空,则它不会提交(应该提交)

我没有看到我的验证函数有问题吗?或者它在引导程序中吗?

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

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>

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

名称:{必需:true,名称:true},

规则:

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