jQuery 验证自定义方法不显示消息

Question

我创建了一个名为 'require' 的自定义 jQuery 验证器方法，因为我还想在必填字段为空时添加红色边框。该方法添加红色边框成功，但是没有显示错误信息。我做错了什么？

名字输入控件

<input type="text" name="firstName" class="form-control" id="fName" placeholder="First Name" />

jQuery 自定义验证器方法。

jQuery.validator.addMethod("require", function (value, element, params) {
    var valid = false;
    if (!value) {
        $(element).addClass('invalid');
    } else {
        $(element).removeClass('invalid');
        valid = true;
    }
    return this.optional(element) || valid;
}, "Required field");

验证者规则

$('#newUsers').validate({
        rules: {
            firstName: {
              // required : true,
               maxlength: 50,
               require : '#firstName'
            },
          messages: {
            firstName: {
        //required: 'First name is required.'
                maxlength: 'First name cannot have more 50 letters',
                require: 'First name is required.'
            }
    }

Answer 1

I created a cutom jQuery validator Method called 'require' because I wanted to also add a red border when a required field is empty.

您不需要，也不应该，编写一个全新的 required 规则来简单地添加一个红色边框！如果你这样做，那么你基本上会破坏插件的大部分默认功能，并且你只有一个规则和 none 其他规则的自定义样式。

您可以简单地使用 CSS 来设置您认为合适的 error class 的样式。演示 1：jsfiddle.net/L61xec5x/

或

您可以使用errorClass选项将默认错误class更改为invalid。演示 2：jsfiddle.net/L61xec5x/1

The method added the red border successfully, but it did not display the error message. What did I do wrong?

您的自定义方法有这一行...

return this.optional(element) || valid;

this.optional(element) || 部分将确保规则始终是可选的。换句话说，它表示只要该字段留空就完全忽略此规则。 您不能将此用于 require 规则，因为如果字段为空时可选，则该字段不能是必填字段。

演示 3：jsfiddle.net/L61xec5x/4/

我只是向您展示 how/why 您的代码无法正常工作。更改样式的首选方法是使用 CSS and/or 插件中已内置的方法。

Answer 2

这是一个可以工作的 fiddle 示例代码：https://jsfiddle.net/dreysolano/nnfp5h8j/

除了您的 .validate() 选项可能存在的一些语法问题之外，从您的自定义 require 方法返回 valid 而不是 this.optional(element) || valid 似乎可以解决问题。

Answer 3

这个"require"方法应该在你的输入下class

jQuery 验证自定义方法不显示消息

jQuery Validate Custom Method Not Display Message

javascript

jquery

jquery-validate