我已经玩了几天 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'
}};
验证设置：（添加了几种方法来检查有效的英国电话和邮件）
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：
好的，刚刚意识到 validate 使用名称而不是 id，所以我添加了与所有字段的 id 完全相同的名称，但结果仍然相同，即即使输入了无效数据，验证也会返回 true？