当验证的输入值从有效变为无效时，将不会触发 removeClass 调用

Question

我在我的邮政编码表单上使用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>

正如我所说，一切都很好，除非他们在提交了有效的邮政编码后输入了无效的邮政编码。我知道他们不太可能这样做，但对于那些确实发生的情况，我想解决它。

我在success: function 中有一个else 子句，就像这样，

  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 调用。即使整个验证过程仍在进行中。

有什么想法吗？

Answer 1

当验证的输入值从有效变为无效时，removeClass 调用不会触发

removeClass 或您的 success 回调函数中的任何其他内容都没有问题。问题是，根据定义，当元素“无效”时，success 回调本身永远不会触发......

success 回调选项的预期目的是控制错误消息label仅当输入为“有效”时。由于 success only 在元素“有效”时触发，因此您的 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');
},

演示：http://jsfiddle.net/k7t5ko83/