我在邮政编码表格上使用jQuery Validate Plugin。
我已经进行了设置，以便根据验证返回<label>类.error或.valid。如果<input>有效，则会显示隐藏的<a>以显示联系人号码。
除非用户在输入有效的邮政编码后输入无效的邮政编码，否则它会正常工作。如果他们这样做，则根据需要将有效消息替换为无效消息。但联系电话<a>标记仍然可见。
以下是代码：
//js
$('.postcode_form').validate({
rules: {
postcode: {
required: true,
range: [3030, 3340]
}
},
messages: {
postcode: {
range: "Sorry, doesn't look like we service that area"
}
},
onkeyup: false,
success: function (label) {
var callNow = ".call-now";
label.addClass("valid").text("Looks good, call us now");
if(label.hasClass("valid")) {
$(callNow).addClass('is-visible');
}
}
});
//html
<form class="postcode_form" id="postcode_form" name="postcode_form" action="#">
<input type="number" id="your_postcode" class="your_postcode" name="postcode" placeholder="3???">
<button type="button" class="area-btn"><span></span></button>
<a href="tel:+6#########" class="call-now">##########</a>
</form>
正如我所说，一切都很有效，除非他们在提交了有效的邮政编码后输入了无效的邮政编码。我知道他们不太可能会这样做但是对于那些确实发生的情况我想解决它。
我在else中有一个success: function条款，就像这样，
success: function (label) {
var callNow = ".call-now";
label.addClass("valid").text("Looks good, call us now");
if(label.hasClass("valid")) {
$(callNow).addClass('is-visible');
} else {
$(callNow).removeClass('is-visible');
}
}
但它似乎没有效果。我认为它甚至没有被阅读。
我倾向于label.addClass("valid").text("Looks good, call us now");作为罪魁祸首。就像有效的<label>一样，它就无法识别removeClass电话。尽管整个验证过程仍在进行中。
有什么想法吗？
答案 0 :(得分：0)
当验证的输入值从有效变为无效时，removeClass调用将不会触发
removeClass或success回调函数中的任何其他内容都没有错。问题是，根据定义，当元素“无效”时，success回调本身永远不会触发......
success回调选项的目的是仅在输入“有效”时控制错误消息label 。由于只有success 在元素“有效”时触发您的if / else因错误而无法正常工作当元素变为“无效”时，期望success也会触发。
尝试使用highlight和unhighlight选项来控制类。只要任何给定字段的有效性来回切换，它们就会触发。 （消息本身将自动切换，因为当输入“有效”和“无效”时，使用相同的label元素。）
基本上，每当“有效”时，使用success操纵label，并在“无效” - “有效”时分别使用highlight-unhighlight切换类。
success: function(label) {
label.addClass("valid").text("Looks good, call us now");
},
highlight: function(element) {
$('.call-now').removeClass('is-visible');
},
unhighlight: function(element) {
$('.call-now').addClass('is-visible');
},