Question

我创建了一个cutom jQuery验证器方法，称为＆＃39;要求＆＃39;因为我想在必填字段为空时添加红色边框。该方法成功添加了红色边框，但未显示错误消息。我做错了什么？

名字输入控件

<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

我创建了一个名为'require'的cutom jQuery验证器方法，因为我还想在必填字段为空时添加红色边框。

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

您可以根据需要简单地使用CSS来设置error类的样式。 DEMO 1：jsfiddle.net/L61xec5x/

OR

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

该方法成功添加了红色边框，但未显示错误消息。我做错了什么？

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

return this.optional(element) || valid;

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

DEMO 3：jsfiddle.net/L61xec5x/4/

我只向您展示您的代码无法正常工作的原因。更改样式的首选方法是使用CSS和/或插件中已经内置的方法。

Answer 2

以下是您的示例代码的工作小提琴：https://jsfiddle.net/dreysolano/nnfp5h8j/

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

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

2 个答案: