jQuery 验证时出现不同的错误消息

Question

我正在使用 jQuery 验证插件。

我有一个必需的 url 输入，当它为空时 return 错误 "This field is required."。

我想要的是当这个输入的值为'home'时，将错误更改为"There is already a homepage"。但仅当在输入字段中键入 'home' 时。

这是我的 jQuery 代码：

$("#edit_pages_form").validate({
    errorClass: "has-error",
    validClass: "has-success",
    highlight: function(element, errorClass, validClass) {
        $(element).closest("div")
            .addClass(errorClass)
            .removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).closest("div")
            .removeClass(errorClass)
            .addClass(validClass);
    }
});

您可能会注意到我突出显示了输入字段，当输入字段为空时我添加了 has-error class，当不为空时我添加了 has-success class。

我想要的是当输入 'home' 作为值时，要添加的 class 有错误。

提前致谢

Answer 1

只需添加一个 if 语句来检查值是否为 home？

$("#edit_pages_form").validate({
errorClass: "has-error",
validClass: "has-success",
has-error: "has-error",
highlight: function(element, errorClass, validClass) {
if($('#url-texbox-id').val() == "home"){
 $(element).closest("div")
        .addClass(has-error);
        .removeClass(validClass);
}
else{
    $(element).closest("div")
        .addClass(errorClass)
        .removeClass(validClass);
        }
},
unhighlight: function(element, errorClass, validClass) {
    $(element).closest("div")
        .removeClass(errorClass)
        .addClass(validClass);
}
});

Answer 2

您可以创建自定义验证方法：

<form class="cmxform" id="edit_pages_form" method="get" action="">
  <fieldset>
    <p>
      <label for="cname">Name</label>
      <input id="name" name="name" type="text" required>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

$(document).ready(function() {

  jQuery.validator.addMethod("isHome", function(value, element) {
    if (value.length == 4) {
      return (value != "home");
    }
    return true;
  }, "There is already a homepage");

  $("#edit_pages_form").validate({
    rules: {
      name: {
        isHome: true
      }
    },
    errorClass: "has-error",
    validClass: "has-success",
    highlight: function(element, errorClass, validClass) {
      $(element).closest("div")
        .addClass(errorClass)
        .removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).closest("div")
        .removeClass(errorClass)
        .addClass(validClass);
    }
  });


});

演示：http://jsfiddle.net/qtgahxss/1/

jQuery 验证时出现不同的错误消息

Different error message on jQuery validation

javascript

validation

jquery

jquery-validate