2016-05-13 181 views
1

这是我的代码validation的注册form。但是,我在运行时遇到问题。Jquery validate()无法正常工作

$(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无法正常工作。

请给点解决办法。感谢

+1

是它给予任何控制台中的错误? –

+0

控制台中的noo错误,但表单正在获取submited @DharaParmar – Gomzy

+0

** ['在此处运行正常](https://jsfiddle.net/Guruprasad_Rao/mh9yvh11/)**? –

回答

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"}, 
      }, 

     });