2012-08-01 78 views
1

我一直在玩Jquery Validate幾天,現在我似乎無法得到它實際驗證任何東西。 這個想法是,我有一個窗體,通過AJAX執行CRUD操作,但在允許AJAX操作之前,我想觸發驗證,並且只允許在一切正常的情況下發送數據。 但由於某些原因數據正在發送,無論是否有效,沒有得到任何螢火蟲錯誤或任何指示問題。 (包括之前在一個單獨的文件,但與jQuery和驗證文件)jquery驗證無所作爲?

繼承人我的代碼:

規則和消息:

var rules = { 

id: {required: true,number: true,minlength: 9,maxlength: 9}, 
forename: {required: true,maxlength: 255}, 
surname: {required: true,maxlength: 255},  
addr1: {required: true,maxlength: 255}, 
addr2: {required: true,maxlength: 255}, 
addr3: {required: true,maxlength: 255},  
addr4: {required: true,maxlength: 255}, 
postcode: {required: true,postUK: true},  
pemail: {required: true,email:true}, 
wemail: {required: true,email:true}, 
hphone: {required: true, phoneUK: true}, 
wphone:{required:true,phoneUK:true},  
mphone: {required: true,phoneUK: true}}; 

var messages = { 
id: { 
    required: 'The student id field cannot be empty ', 
    number: 'The id must consist of whole numbers only ', 
    minlength: $.validator.format("Your id length of {0} is not right must be at least 9"), 
    maxlength: $.validator.format("Your id length of {0} is not right must be no more than 9") 
}, 

forename: { 
    required: 'The forename cannot be empty', 
    maxlength: 'The forename cannot be more than 255 charters' 
}, 

surname: { 
    required: 'The surname field cannot be empty', 
    maxlength: 'The forename cannot be more than 255 charters'  
}, 

addr1: { 
    required: 'The address 1 field cannot be empty', 
    maxlength: 'The address 1 cannot be more than 255 charters' 
}, 

addr2: { 
    required: 'address 2 field cannot be empty', 
    maxlength: 'address 2 cannot be more than 255 charters' 
}, 

addr3: { 
    required: 'address 3 field cannot be empty', 
    maxlength: 'address 3 cannot be more than 255 charters' 
}, 

addr4: { 
    required: 'address 4 field cannot be empty', 
    maxlength: 'address 4 cannot be more than 255 charters' 
}, 

postcode: { 
    required: 'The post code field cannot be empty', 
    postUK: 'The provided post code is not in the correct format' 
}, 

wemail: { 
    required:' work email field cannot be empty', 
    email:'The work email address provided is not a valid email address ' 
}, 

pemail: { 
    required: 'personal email field cannot be empty', 
    email: 'The personal email address provided is not a valid email address' 
}, 

hphone: { 
    required: 'home phone number field cannot be empty', 
    phoneUK: 'The home phone number provided is not valid' 
}, 

mphone: { 
    required: 'mobile phone number field cannot be empty', 
    phoneUK: 'The mobile phone number provided is not valid' 
}, 

wphone: { 
    required: 'work phone number field cannot be empty', 
    phoneUK: 'The home phone number provided is not valid' 
}}; 

驗證設置:(突出部分增加了幾個方法檢查有效的英國電話和郵寄)

jQuery.validator.addMethod('phoneUK', function(value, element) { 
    return this.value.length > 9 && 
    value.match(/^(((\+44)? ?(\(0\))? ?)|(0))(?[0-9]{3,4}){3}$/); 
}); 

jQuery.validator.addMethod('postUK', function(value, element) { 
    var regex = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i; 
    return regex.test(value); 
}); 

實際的檢驗:

 $('#detailsForm').validate({ 
     rules: rules, 
     messages: messages, 
     highlight: function(element) { 
      $(element).addClass('errorInput'); 
     }, 
     unhighlight: function (element) { 
      $(element).removeClass('errorInput'); 
     } 
    }); 

    var valid = $('#detailsForm').valid(); // echo of this always seems to return true ?? 

if (!valid) { 
     alert ("The data you have inputted contains errors which have been highlighted "); 
     return; 
    } 

    else { // do Ajax request this seems to be triggered no matter how I try to validate. 

對不起,它可以幫助嗎?

在此先感謝

更新:的頁面請求的HTML:

    <form type ="text" id ="detailsForm" > 

         <div id ="row1" class="row" > 
          <label for='id'> ID: 
           <br/> 
       <input id ="id" name ="id" class="standardInput" /> 
          </label> 

          <label for='forename'> Forename: 
           <br/> 
           <input type ="text" id="forename" name="forename" class="standardInput"/> 
          </label> 


          <label for='surname' > Surname: 
           <br/> 
           <input type ="text" id ="surname" name ="surname" class="standardInput"/> 
          </label> 

          <label for ="modeID"> Mode ID: 
           <br/> 
           <select id ="modeID" name ="modeID" class="standardInput"> 
            <option value ="123">123</option> 
            <option value ="153">153</option> 
            <option value ="44">44</option> 
           </select> 
          </label> 

          <label for ="routeID"> Route ID: 
           <br/> 
           <select id ="routeID" name ="routeID" class="standardInput"> 
            <option value ="g12">g12</option> 
            <option value ="g13">g13 2</option> 
            <option value ="H1">H1</option> 
           </select> 
          </label> 
         </div> 

         <div id ="row2"> 
          <label for ="addr1"> Address Line 1: 
           <br/> 
           <input type ="text" id="addr1" name ="addr1" class="standardInput"/> 
          </label> 

          <label for ="addr2"> Address Line 2: 
           <br/> 
           <input type ="text" id="addr2" name ="addr2" class="standardInput"/> 
          </label> 

          <label for ="addr3"> Address Line 3: 
           <br/> 
           <input type ="text" id="addr3" name ="addr3" class="standardInput"/> 
          </label> 

          <label for ="addr4"> Address Line 4: 
           <br/> 
           <input type ="text" id="addr4" name ="addr4" class="standardInput"/> 
          </label> 

          <label for ="postcode"> Post code: 
           <br/> 
           <input type ="text" id="postcode" name ="postcode" class="standardInput"/> 
          </label> 
         </div> 

         <div id ="row3" class ="row"> 

          <label for ="pemail"> Personal email: 
           <br/> 
           <input type ="text" id="pemail" name="pemail" class="standardInput"/> 
          </label> 

          <label for ="wemail"> Work email: 
           <br/> 
           <input type ="text" id="wemail" name ="wemail" class="standardInput"/> 
          </label> 

          <label for ="wphone"> Work phone No.: 
           <br/> 
           <input type ="text" id="wphone" name ="wphone" class="standardInput"/> 
          </label> 

          <label for ="hphone"> Home phone No.: 
           <br/> 
           <input type ="text" id="hphone" name ="hphone" class="standardInput"/> 
          </label> 

          <label for ="mphone"> Mobile phone No.: 
           <br/> 
           <input type ="text" id="mphone" name ="mphone" class="standardInput"/> 
          </label> 
         </div> 
        </form> 
       </div> 

更新2:

好吧剛剛意識到驗證使用名稱不IDS所以我添加了與al的id完全相同的名稱l字段,但仍然是相同的結果,即使輸入無效數據,validate也會返回true。

+1

你能提供html嗎? – r0m4n 2012-08-01 15:20:39

+0

@ user1555360:或者可以爲此創建一個小提琴嗎?然後它變得容易調試.. – 2012-08-02 06:11:48

回答

1

OK固定它,

放在驗證功能在它自己的方法(不是真正的修復,但好的做法任何如何),然後創建一個驗證器對象,並呼籲其.FORM()方法來驗證表單和返回從布爾每個調用方法請參閱以下內容:

function validateForm() { 

var validator = $('#detailsForm').validate({ 
      rules: rules, 
      messages: messages, 
      highlight: function(element) { 
       $(element).addClass('errorInput'); 
      }, 
      unhighlight: function (element) { 
       $(element).removeClass('errorInput'); 
      } 
     }); 

     var result = validator.form(); return result;} 

而在AJAX功能:

var valid = validateForm(); 
     alert(valid); 

     if (valid === false) { 
      alert ('The information that has been input during the addition contains errors that have been highlighted'); 
      return; 
     } else {} // do AJAX request 

其實一個很簡單的修復,但hopef ully可能會在未來幫助某人。