我一直在玩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。
你能提供html嗎? – r0m4n 2012-08-01 15:20:39
@ user1555360:或者可以爲此創建一個小提琴嗎?然後它變得容易調試.. – 2012-08-02 06:11:48