jQuery検証プラグインは特定のフォームフィールドのみを検証しています

Question

jQuery検証プラグインを使用して基本的なクライアントサイドフォームの検証を試みています。すべてのフィールドが空のアカウントを作成するボタンをクリックすると基本的な登録フォームが表示されますテスト用に）、すべてのフォームフィールドに期待どおりのエラーメッセージが表示されますを除く携帯電話番号を入力するフィールドは1つだけです。私はインターネットからコードをダウンロードしました。これは私が追加した唯一のフィールドです。私はXamppを使用しています。私は別のコンピュータにすべてのファイルを移動し、同じ検証をテストしようとしたら、事はさらに奇妙になりました。 これは、すべてのフィールドで予期したとおりに機能しなくなりました。この問題は、私の脳を揚げてきた、私は以下感謝するでしょう任意のヘルプは、コードの下

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

フォームのスナップショットです私は本当にどこに問題があるのか​​把握できません。

Answer 1

あなたはは引用符であってはならない...

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

そしてdocumentをnumberルールを宣言しているが、あなたの対応するメッセージがminlengthルールに割り当てられている...

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

作業中デモ：http://jsfiddle.net/bh5g0wfe/

サイドノート：あなたはあまりにもこれを読むことをお勧めします...

Dangerous implications of Allman style in JavaScript