Jquery: convalida del modulo non funzionante

Question

Sono molto nuovo a Jquery e spero che voi ragazzi potete aiutarmi con questo problema di validazione jquery.

Provate a convalidare il modulo ma non convalida affatto. Accetta tutto ciò che digito sul campo, indipendentemente dalle restrizioni impostate.

Per favore aiuto. Grazie.

Qui è il mio codice:

<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

Hai 2 elementi con il id="form", in modo che il validatore viene assegnato al div non al form.

Modificare il valore id dello div in qualcos'altro.

anche il file additional-methods.js deve essere aggiunto dopo query.validate.js e non v'è un errore di sintassi a causa del alert() all'interno del validate modo

<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> 

poi

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 è necessario creare una regola personalizzata nella libreria come questo

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

e poi utilizzarlo come questo

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

    }