jQuery Validierung Plugin prüft nur bestimmte Formularfelder

Question

Ich versuche grundlegende clientseitige Formularvalidierung mit jQuery Validierung Plugin.Ich habe eine grundlegende Anmeldung Formular, wenn ich auf eine Schaltfläche klicken, um ein Konto mit allen Feldern leer (nur zum Testen), bekomme ich nette Fehlermeldungen wie erwartet in allen Formularfeldern außer für nur ein Feld zur Eingabe der Handynummer. Ich habe den Code aus dem Internet heruntergeladen und dies ist das einzige Feld, das ich hinzugefügt habe. Ich benutze Xampp, Dinge wurden noch seltsamer, nachdem ich alle Dateien auf einen anderen Computer verschoben habe und versuche, die gleiche Validierung zu testen, Rate mal was? funktioniert es nicht mehr wie erwartet für alle Felder. Dieses Problem hat mein Gehirn wurde Braten, jede Hilfe, die ich unten dankbar sein wird, ist der Code

HTML

 <h2 class="form-signin-heading">Sign Up</h2><hr /> 

     <div id="error"> 
     </div> 

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

     <div class="form-group"> 
      <input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" /> 
      <span id="check-e"></span> 
     </div> 

     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Cellphone" name="user_cellphone" id="user_cellphone" /> 
     </div> 
    <div class="form-group"> 
      <input type="password" class="form-control" placeholder="Password" name="password" id="password" /> 
     </div> 

     <div class="form-group"> 
      <input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" /> 
     </div> 
     <hr /> 

     <div class="form-group"> 
      <button type="submit" class="btn btn-default" name="btn-save" id="btn-submit"> 
       <span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account 
      </button> 
     </div> 

    </form> 

JS

$('document').ready(function() 
{ 
/* validation */ 
$("#register-form").validate({ 
    rules: 
    { 
     user_name: { 
      required: true, 
      minlength: 3 
     }, 
     user_cellphone: { 
      required: true, 
      number: true 
     }, 
     password: { 
      required: true, 
      minlength: 8, 
      maxlength: 15 
     }, 
     cpassword: { 
      required: true, 
      equalTo: '#password' 
     }, 
     user_email: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     user_name: "Enter a Valid Username", 
     user_cellphone:{ 
      required: "Provide a phone number", 
      number: "Phone Needs To Be a number" 
     }, 
     password:{ 
      required: "Provide a Password", 
      minlength: "Password Needs To Be Minimum of 8 Characters" 
     }, 
     user_email: "Enter a Valid Email", 
     cpassword:{ 
      required: "Retype Your Password", 
      equalTo: "Password Mismatch! Retype" 
     } 
    }, 
    submitHandler: submitForm 
}); 
/* validation */ 
/* form submit */ 
function submitForm() 
{ 
    var data = $("#register-form").serialize(); 

    $.ajax({ 

     type : 'POST', 
     url : 'register.php', 
     data : data, 
     beforeSend: function() 
     { 
      $("#error").fadeOut(); 
      $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...'); 
     }, 
     success : function(data) 
     { 
      if(data==1){ 

       $("#error").fadeIn(1000, function(){ 


        $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>'); 

        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 

       }); 

      } 
      else if(data=="registered") 
      { 

       $("#btn-submit").html('Signing Up'); 
       setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000); 

      } 
      else{ 

       $("#error").fadeIn(1000, function(){ 

        $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>'); 

        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account'); 

       }); 

      } 
     } 
    }); 
    return false; 
} 
/* form submit */ 

Unten ist eine Momentaufnahme der Form Ich kann wirklich nicht herausfinden, wo das Problem liegt.

Answer 1

Sie erklärt die number Regel, aber Ihre entsprechende Mitteilung an den minlength Regel zugeordnet ist ...

rules: { 
    user_cellphone: { 
     required: true, 
     number: true 
    }, 
    .... 
}, 
messages: { 
    user_cellphone: { 
     required: "Provide a phone number", 
     minlength: "Phone Needs To Be a number" 
    }, 
    .... 

Und document sollte nicht in Anführungszeichen gesetzt werden ...

$(document).ready(function() {... 

Funktionierende DEMO: http://jsfiddle.net/bh5g0wfe/

Exkurs: Möglicherweise möchten Sie diese lesen ...

Dangerous implications of Allman style in JavaScript