Jquery validate()无法与其他方法一起正常工作

Question

这是注册form的validation的代码。但是，我在运行期间遇到了问题。

$(document).ready(function() {
  $("#frmRegi").validate({
    rules: {
      firstName: {
        required: true,
        lettersonly: true
      },
      lastName: {
        required: true,
        lettersonly: true
      },
      email: {
        required: true,
        remote: {
          url: AJAX_URL,
          type: "post",
          data: {
            email: function() {
              return $("#email").val();
            },
            action: 'checkEmail',
          }
        },
        email: true,
      },
      password1: {
        required: true,
        minlength: 6
      },
      cpassword: {
        required: true,
        equalTo: "#password1"
      },
      country: {
        required: true
      },
      state: {
        required: true
      },
      city: {
        required: true
      },
      gen: {
        required: true
      },
      mobile: {
        required: true,
        digitsonly: true,
        minlength: 10
      },
      code: {
        required: true
      },
    },
    messages: {
      firstName: {
        required: "Please Enter FirstName"
      },
      lastName: {
        required: "Please Enter Lastname"
      },
      email: {
        required: "Please Enter Your Email address",
        email: "Invalid Email",
        remote: "Email Already Exists"
      },
      password1: {
        required: "Please Enter Password",
        minlength: "Minimum 6 Characters"
      },
      cpassword: {
        required: "Please Re-Enter password",
        equalTo: "passwords doesnt match"
      },
      country: {
        required: "Please select Country"
      },
      state: {
        required: "Please select State"
      },
      city: {
        required: "Please select City"
      },
      gen: {
        required: "please select gender"
      },
      mobile: {
        required: "Please Enter Your Mobile number",
        minlength: "Minimum 10 numbers"
      },
      code: {
        required: "please enter captcha"
      },
    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<div class="main">
  <form name="frmRegi" id="frmRegi" method="POST">
    <div class="container">
      <h3>Tell Us About Yourself... </h3>
      <div class="form-inline">
        <div class="form-group">
          <select>
            <option value="volvo">Mr.</option>
            <option value="saab">Miss.</option>
          </select>
        </div>
        <div class="form-group">
          <input class="form-control" name="firstName" id="firstName" placeholder="First Name*" type="text">
        </div>
        <div class="form-group">
          <input class="form-control" name="lastName" id="lastName" placeholder="Last Name*" type="text">
        </div>
      </div>
      <div class="form-inline full-width-text">
        <div class="form-group">
          <input class="form-control" name="email" id="email" placeholder="Email*" type="email">
        </div>
        <div class="form-group">
          <input class="form-control" name="mobile" id="mobile" placeholder="Mobile no.*" type="text">
        </div>
      </div>
      <div class="form-inline">
        <div class="form-group">
          <textarea class="form-control comment" rows="3" name="address" id="address" placeholder="Address" id="comment"></textarea>
        </div>
      </div>
      <div class="form-inline full-width-text">
        <div class="form-group">
          <select class="gender" name="gen" id="gen">
            <option value="Gender">Gender*</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </div>
        <div class="form-group">
          <input class="form-control" name="secret" id="secret" placeholder="Secret Word" type="text">
        </div>
      </div>
      <div class="form-inline">
        <div class="form-group">
          <input class="form-control comment" name="paypalEmail" id="paypalEmail" placeholder="Paypal Email" type="text">
        </div>
      </div>
      <div class="form-inline full-width-text">
        <div class="form-group">
          <input class="form-control" name="password1" id="password1" placeholder="Password*" type="password">
        </div>
        <div class="form-group">
          <input class="form-control" name="cpassword" id="cpassword" placeholder="Confirm Password*" type="password">
        </div>
      </div>
      <div class="form-inline full-width-text">
        <div class="form-group">
          <select name="country" id="country" class="gender">
            <option>aaa</option>
            <option>aaa</option>
            <option>aaa</option>
          </select>
        </div>
        <div class="form-group">
          <select name="state" id="state" class="gender">
            <option>aaa</option>
            <option>aaa</option>
            <option>aaa</option>
          </select>
        </div>
      </div>
      <div class="form-inline full-width-text">
        <div class="form-group">
          <select name="city" id="city" class="gender">
            <option>aaa</option>
            <option>aaa</option>
            <option>aaa</option>
          </select>
        </div>
        <div class="form-group">
          <input class="form-control" name="zip" id="zip" placeholder="Zip code" type="text">
        </div>
      </div>
      <div class="form-inline">
        <div class="form-group">
          <img id="imgCaptcha" src="{SITE_INC}captcha-nct/random.php" class="captcha_img" height="35" alt="Captcha Code" title="Captcha Code" />
        </div>
        <div class="form-group refresh">
          <input class="form-control" placeholder="" type="text">
        </div>
        <div class="form-group">
          <input class="form-control" name="code" id="code" placeholder="Enter captcha*" type="text">
        </div>
      </div>
      <div class="form-inline">
        <input type="submit" name="sbtRegi" id="sbtRegi" class="btn btn-default blue-btn" value="Register" />
        <button type="submit" name="sbtCancel" class="btn btn-default blue-btn">Cancel</button>
      </div>
    </div>
  </form>
</div>

此代码工作不正常。

validation没有处理它。

请给出解决方案。感谢

Answer 1

这里有一些问题：

1） 在验证文件下面添加此文件：

<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

2） 在jquery中：

$("#frmRegi").validate({
            rules:{
                firstName:{required:true,lettersonly: true},
                lastName:{required:true,lettersonly: true},
                email:{ required :true,
                    remote: {
                        url: AJAX_URL,
                        type: "post",
                        data: {
                            email: function() {
                                return $( "#email" ).val();
                            },
                            action : 'checkEmail',
                        }
                    },
                    email:true,
                },
                password1:{required:true,minlength:6},
                cpassword:{required:true,equalTo:"#password1"},
                country:{required:true},
                state:{required:true},
                city:{required:true},
                gen:{required:true},
                mobile:{required:true,digits: true,minlength:10}, // Change digitsonly to digits
                code:{required:true},
            },
            messages:{
                firstName:{required:"Please Enter FirstName"},
                lastName:{required:"Please Enter Lastname"},
                email:{required:"Please Enter Your Email address",email:"Invalid Email",remote:"Email Already Exists"},
                password1:{required:"Please Enter Password",minlength:"Minimum 6 Characters"},
                cpassword : {required:"Please Re-Enter password",equalTo:"passwords doesnt match"},
                country:{required:"Please select Country"},
                state:{required:"Please select State"},
                city:{required:"Please select City"},
                gen:{required:"please select gender"},
                mobile:{required:"Please Enter Your Mobile number",minlength:"Minimum 10 numbers"},
                code:{required:"please enter captcha"},
            },
        });