我已经使用 Jquery Validate 几天了，但我似乎无法让它实际验证任何内容。 我的想法是，我有一个通过 AJAX 执行 CRUD 操作的表单，但在允许 AJAX 操作之前，我想触发验证，并且仅在一切正常的情况下才允许发送数据。 但由于某种原因，无论数据是否有效，都会发送数据，没有收到任何 Firebug 错误或任何指示问题的信息。
这是我的代码(在一个单独的文件中，但前面包含 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:
好吧，刚刚意识到验证使用名称而不是 ID，因此我向所有字段添加了与 ID 完全相同的名称，但结果仍然相同，即即使输入无效数据，验证也会返回 true？
最佳答案
好的，已修复，
将验证函数放在它自己的方法中(不是真正的修复，但无论如何都是很好的实践)，然后创建一个验证器对象并调用其 .form() 方法来验证表单并将 bool 值返回给每个调用方法请参阅以下内容:
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
实际上是一个非常简单的修复，但希望将来可以帮助别人。
关于Jquery 验证什么都不做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11762039/