我一直在玩Jquery Validate几天了，我似乎无法让它真正验证任何东西。 我的想法是我有一个通过AJAX进行CRUD操作的表单，但在我允许AJAX操作之前，我想触发验证，只允许在一切正常的情况下发送数据。 但由于某些原因，无论是否有效，都会发送数据，不会出现任何萤火虫错误或任何表明问题的信息。
继承我的代码（在单独的文件中，但使用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'
}};
验证设置:( jut添加了几种方法来检查有效的UK手机和帖子）
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：
好吧刚刚意识到验证使用的是名称而不是ID，所以我添加了与所有字段的id完全相同的名称，但结果仍然相同，即使输入了无效数据，validate也会返回true？
答案 0 :(得分：1)
好的修好了，
将validate函数放在自己的方法中（不是真正的修复，但不是任何好的实践），然后创建一个验证器对象并调用它的.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
实际上这是一个非常简单的修复，但希望将来有可能帮助某人。