我想我发现了 jquery 验证(bassistance)的远程规则功能中的一个错误。我用 jquery.validation 1.9.0 和 1.10.0 对其进行了测试。 这是我的 HTML 和 JS:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.validate.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
window.validater = $("#SignUpForm").validate({
rules: {
"initials": {
required: true
},
"lastname": {
required: true
},
"phonenumber": {
required: true,
remote: { url: "/checkPhoneNumber.php", async:false }
}
},
messages: {
"initials": {
required: "U heeft uw voorletters niet ingevuld"
},
"lastname": {
required: "U heeft uw achternaam niet ingevuld"
},
"phonenumber": {
required: "U heeft uw telefoonnummer niet ingevuld",
remote: "U heeft geen geldig telefoonnummer ingevuld (formaat: +311230123456).",
}
}
});
});
</script>
<form enctype="" name="SignUpForm" method="POST" action="" class="fbForm " id="SignUpForm" novalidate="novalidate">
<div class="fbElement fbTextfield ">
<label for="initials">Voorletters <span class="require">*</span> </label>
<input type="text" name="initials" value="" style="" title="" class="activePlaceholder" id="initials">
<label class="error" generated="true" for="initials" style="display: none;"></label>
</div>
<div class="fbElement fbTextfield ">
<label for="prefix">Tussenvoegsel </label>
<input type="text" name="prefix" value="" style="" title="" class="activePlaceholder" id="prefix">
<label class="error" generated="true" for="prefix" style="display: none;"></label>
</div>
<div class="fbElement fbTextfield ">
<label for="lastname">Achternaam <span class="require">*</span> </label>
<input type="text" name="lastname" value="" style="" title="" class="activePlaceholder" id="lastname">
<label class="error" generated="true" for="lastname" style="display: none;"></label>
</div>
<div class="fbElement fbTextfield ">
<label for="phonenumber">Telefoonnummer <span class="require">*</span> </label>
<input type="text" name="phonenumber" style="" value="+311230123456" class="activePlaceholder" id="phonenumber">
<label class="error" generated="true" for="phonenumber" style="display: none;"></label>
</div>
<div style="" class="fbContainer " id="navContainer">
<button data-loading-text="Laden..." onclick="" value="Verder" name="SignupFB_NextFB_next" class="submit " type="Submit" id="SignupFB_NextFB_next">Verder</button>
</div>
</form>
</body>
</html>
您可能会注意到:我在电话号码字段上有一个远程规则。远程规则本身运行良好。出于测试目的，我的 checkPhoneNumber.php 包含:
<?php
$valid = 'false';
echo $valid;
我真的需要 async:false。否则，当我不首先手动单击电话号码字段来触发 ajax 请求时，我将无法提交表单。这是 stackoverflow 上的一个已知问题。但是，当我添加 async:false 时，上面的字段中不会出现验证消息。电话号码字段下方的字段不存在此问题。当我将电话号码字段移到缩写字段上方时，验证消息没有问题。
有谁知道如何解决这个问题，或者知道解决方法吗？
提前致谢，
威廉
最佳答案
我在 jquery.validate.js (v1.10.0 - 9/7/2012) 中发现，当验证所有规则时会调用 showErrors 函数，并在远程规则完成时再次单独调用。
当远程规则完成并且调用 showErrors 函数时， this.errorList 将被重置。但此时 this.errorList 变量将包含之前的验证消息。
注释掉this.errorList = [];将解决上述问题。我不知道它是否会破坏其他东西。
编辑: 它在提供的测试用例中不会失败。
showErrors: function(errors) {
if(errors) {
// add items to error list and map
$.extend( this.errorMap, errors );
//this.errorList = [];
for ( var name in errors ) {
this.errorList.push({
message: errors[name],
element: this.findByName(name)[0]
});
}
// remove items from success list
this.successList = $.grep( this.successList, function(element) {
return !(element.name in errors);
});
}
if (this.settings.showErrors) {
this.settings.showErrors.call( this, this.errorMap, this.errorList );
} else {
this.defaultShowErrors();
}
}
关于jquery 验证远程错误 (async=false)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12475350/