Jquery: Xác thực biểu mẫu không hoạt động

Question

Tôi rất mới với Jquery và hy vọng các bạn có thể giúp tôi với vấn đề xác thực jquery này.

Đã cố xác thực biểu mẫu nhưng không xác thực được. Nó chấp nhận bất cứ điều gì mà tôi gõ vào lĩnh vực này, bất kể những hạn chế tôi đặt ra.

Vui lòng trợ giúp. Cảm ơn bạn.

Đây là mã của tôi:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 

    <script type="text/javascript"> 
    $(function(){ 
    $('#form').validate({ 
    alert("bbbb"); 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 20, 
      lettersonly: true 
     }, 
     ssn: { 
      required: true, 
      minlength: 9, 
      maxlength: 9, 
      nowhitespace: true 
     }, 
     gender: { 
      required: true 
     }, 
     mobile: { 
      required: true, 
      minlength: 10, 
      maxlength: 13, 
      digits: true 
     }, 
     address: { 
      required: true, 
      minlength: 10, 
     }, 
     email: { 
      required: true, 
      minlength: 6, 
      email: true 
     } 
    }, 
    messages: { 
     name: { 
      required: "Please enter your name", 
      minlength: "Name should be more than 2 characters", 
      maxlength: "Name should be less than 20 characters", 
      lettersonly: "Name should contain only letters" 
      }, 
     ssn: { 
      required: "Please enter your NRIC", 
      minlength: "NRIC should be more than 9 characters", 
      maxlength: "NRIC should be less than 9 characters", 
      nowhitespace: "NRIC should not have any spaces" 
      }, 
     gender: { 
      required: "Please select your gender", 
      }, 
     mobile: { 
      required: "Please enter your mobile number", 
      minlength: "Mobile number should be more than 10 characters", 
      maxlength: "Mobile number should be less than 13 characters", 
      digits: "Mobile number should contain only digits" 
      }, 
     address: { 
      required: "Please enter your address", 
      minlength: "Address should be more than 10 characters", 
      }, 
     email: { 
      required: "Please enter your email address", 
      minlength: "Password should be more than 6 characters", 
      email: "Please enter a valid email address" 
      } 
    }, 
    }); 

    $("#submit").click(function(){ 
     $("#form").submit(); 
     return false; 
     }); 

    }); 
    </script> 

    <div id="form"> 
    <center> 
    <form id="form"> 
    <div class="col-xs-12"> 
    <input type="text" name="name" id="name" placeholder="Name" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="nric" id="nric" placeholder="NRIC" required /> 
    </div> 
    <div class="col-xs-12"> 
    <select class="dropdown" id="gender" onChange="changeColor(this)"> 
    <option value="" disabled selected>Gender</option> 
    <option value="female">Female</option> 
    <option value="male">Male</option> 
    </select> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="mobile" id="mobile" placeholder="Mobile" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="address" id="address" placeholder="Address" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="email" name="email" id="email" placeholder="Email" required /> 
    </div> 
    <input id="submit" class="button" type="submit" value="submit"/> 
    </form> 
</center> 
</div> 

Answer 1

Bạn có 2 yếu tố với id="form", vì vậy các validator được gán cho div không đến form.

Thay đổi giá trị id của số div thành thứ khác.

Cũng file additional-methods.js phải được thêm vào sau khi query.validate.js và có một lỗi cú pháp vì alert() trong validate nên

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script> 
<div> 
    <center> 
     <form id="form"> 
      <div class="col-xs-12"> 
       <input type="text" name="name" id="name" placeholder="Name" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="nric" id="nric" placeholder="NRIC" required /> 
      </div> 
      <div class="col-xs-12"> 
       <select class="dropdown" id="gender" onChange="changeColor(this)"> 
        <option value="" disabled selected>Gender</option> 
        <option value="female">Female</option> 
        <option value="male">Male</option> 
       </select> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="mobile" id="mobile" placeholder="Mobile" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="address" id="address" placeholder="Address" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="email" name="email" id="email" placeholder="Email" required /> 
      </div> 
      <input id="submit" class="button" type="submit" value="submit"/> 
     </form> 
    </center> 
</div> 

sau đó

jQuery(function ($) { 
    $('#form').validate({ 
     rules: { 
      name: { 
       required: true, 
       minlength: 2, 
       maxlength: 20, 
       lettersonly: true 
      }, 
      ssn: { 
       required: true, 
       minlength: 9, 
       maxlength: 9, 
       nowhitespace: true 
      }, 
      gender: { 
       required: true 
      }, 
      mobile: { 
       required: true, 
       minlength: 10, 
       maxlength: 13, 
       digits: true 
      }, 
      address: { 
       required: true, 
       minlength: 10, 
      }, 
      email: { 
       required: true, 
       minlength: 6, 
       email: true 
      } 
     }, 
     messages: { 
      name: { 
       required: "Please enter your name", 
       minlength: "Name should be more than 2 characters", 
       maxlength: "Name should be less than 20 characters", 
       lettersonly: "Name should contain only letters" 
      }, 
      ssn: { 
       required: "Please enter your NRIC", 
       minlength: "NRIC should be more than 9 characters", 
       maxlength: "NRIC should be less than 9 characters", 
       nowhitespace: "NRIC should not have any spaces" 
      }, 
      gender: { 
       required: "Please select your gender", 
      }, 
      mobile: { 
       required: "Please enter your mobile number", 
       minlength: "Mobile number should be more than 10 characters", 
       maxlength: "Mobile number should be less than 13 characters", 
       digits: "Mobile number should contain only digits" 
      }, 
      address: { 
       required: "Please enter your address", 
       minlength: "Address should be more than 10 characters", 
      }, 
      email: { 
       required: "Please enter your email address", 
       minlength: "Password should be more than 6 characters", 
       email: "Please enter a valid email address" 
      } 
     }, 
    }); 
}); 

Demo: Fiddle

Answer 2

Hey bạn cần tạo quy tắc tùy chỉnh trong thư viện như thế này

$.validator.addMethod("valueNotEquals", function(value, element, arg){ 
    return arg != value; 
} 

và sau đó có sử dụng nó như thế này

rules: { 
     gender: {valueNotEquals: "default"}            
    }, 
    messages: { 
     gender: { valueNotEquals: "Please select a payment method"}   

    }