Question

我想在表单中使用jquery validate插件，但是每当我单击“提交”按钮时，它都不会显示任何消息。我尝试放置一个操作URL来测试单击提交后是否重定向。这是不对的，因为我知道插件会阻止表单提交。我正在使用bootstrap 4.1

<form id="client-signup-form" method="post" action="">
            <div class="form-group">
                <input type="text" class="form-control" id="CntFname" name="Clientfname" placeholder="First Name"></input>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="CntLname"  name="Clientlname" placeholder="Last Name"></input>

            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="CntContract" name="ClientContact"   placeholder="Mobile Number"></input>

            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="CntEmail" name="ClientEmail"  placeholder="Email"></input>

            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="CntUsername" name="ClientUsername" placeholder="Username"></input>

            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="CntPassword"  name="ClientPassword" placeholder="Password"></input>

            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="Rpassword" name="CRepassword" placeholder="Retype Password"></input>

            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="1" id="CntTerm" name="AgreeTerm"> I agree to the <a href="#" class="href-color-1">Terms and Conditions.</a></label>

            </div>
            <div class="form-group d-flex justify-content-md-center">
                <button type="submit" class="btn btn-info font-size-1" style="width:130px; color: #FAFAFA;">Signup</button>
            </div>
    </form>

$(function(){
  $.validator.addMethod("UNRegex",function(value,element){
    return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);
  }
  );

  $("#client-signup-form").validate({
    debug:true,
    errorElement: "span",
    rule:{
        'Clientfname':{
          required:true,
          minlength: 3,
          maxlength: 100
        },
        'Clientlname':{
          required:true,
          minlength:3,
          maxlength:100
        },
        'ClientContact':{
          required:true,
          number:true,
          rangelength:[11,11]
        },
        'ClientEmail':{
          required:true,
          email:true
        },
        'ClientUsername':{
          required:true,
          UNRegex:true,
          minlength:6,
          maxlength:16
        },
        'ClientPassword':{
          required:true,
          minlength:12,
          maxlength:24
        },
        'CRepassword':{
          equalTo:'#ClientPassword'
        },
        'AgreeTerm':{
          required:true
        }
      },
    messages:{
        'Clientfname':{
          required:"This field is required.",
          minlength: "Minimum character is 3.",
          maxlength: "Maximum character is 100 only."
        },
        'Clientlname':{
          required:"This field is required.",
          minlength:"Minimum character is 3.",
          maxlength:"Maximum character is 100 only."
        },
        'ClientContact':{
          required:"This field is required.",
          number:"Invalid mobile number",
          minlength:"Invalid mobile number",
          maxlength:"Invalid mobile number"
        },
        'ClientEmail':{
          required:"This field is required.",
          email:"Invalid email."
        },
        'ClientUsername':{
          required:"This field is required.",
          UNRegex:"Invalid username, letter and number only.",
          minlength:"Minimum character is 6.",
          maxlength:"Maximum character is 16 only."
        },
        'ClientPassword':{
          required:"This field is required.",
          minlength:"Minimum character is 12.",
          maxlength:"Maximum character is 24 only."
        },
        'CRepassword':{
          equalTo:"Passwords is not match."
        },
       'AgreeTerm':{
          required:"Please agree to the terms and agreements."
        }
      }
  });

});

Answer 1

您可以拦截Submit事件并验证表单，如下所示：

$("#_submit_id").submit(function(event) {
                    if($("#_client-signup-form_id").valid()){
                        event.preventDefault();

                        [..your validation...]

                            event.stopImmediatePropagation();
                        }else{
                            $("#_client-signup-form_id").unbind().submit();
                        }
                    }
                });

Answer 2

请检查出您有错误的地方，我认为您没有添加jquery插件

$(function(){
        $('#client-signup-form').validate({
          rules:{
            "Clientfname":{required:true},
            "Clientlname":{required:true},
            "ClientContact":{required:true},
            "ClientEmail":{required:true},
            "ClientUsername":{required:true},
            "ClientPassword":{required:true},
            "CRepassword":{required:true}
          }
        });

    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>


    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>




    <form id="client-signup-form" method="post" action="">
                <div class="form-group">
                    <input type="text" class="form-control" id="CntFname" name="Clientfname" placeholder="First Name">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="CntLname"  name="Clientlname" placeholder="Last Name">

                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="CntContract" name="ClientContact"   placeholder="Mobile Number">

                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="CntEmail" name="ClientEmail"  placeholder="Email">

                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="CntUsername" name="ClientUsername" placeholder="Username">

                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="CntPassword"  name="ClientPassword" placeholder="Password">

                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="Rpassword" name="CRepassword" placeholder="Retype Password">

                </div>
                <div class="checkbox">
                  <label><input type="checkbox" value="1" id="CntTerm" name="AgreeTerm"> I agree to the <a href="#" class="href-color-1">Terms and Conditions.</a></label>

                </div>
                <div class="form-group d-flex justify-content-md-center">
                    <button type="submit" class="btn btn-info font-size-1" style="width:130px; color: #FAFAFA;">Signup</button>
                </div>
        </form>

jQuery验证1.17.0插件不起作用

2 个答案: