jquery - 验证 jQuery 插件，字段不是必需的

Question

我的表单有问题。

对于电话字段，我希望这不是必需的，但如果已填写(10 位数字)，则格式正确。

如果表单为空并且已通过验证，为什么会显示绿色图像 (validClass)？如何使图像仅在字段填写完毕且格式正确时才显示？

将表格留空并确认查看:http://jsfiddle.net/Xroad/Y3GJr/

$('form').find('.error-message').hide();

$.validator.setDefaults({
    errorClass: 'error-image',
    validClass: 'ok-image',
    errorElement: 'span',
    errorContainer: '#invalid-empty'
});

$("#form-general").validate({

    rules: {
        form_firstname: {
            minlength: 2,
            maxlength: 25,
            regex: /^[-a-zéèçàâA-Z)]+$/
        },
        form_name: {
            minlength: 2,
            maxlength: 25,
            regex: /^[-a-zéèçàâA-Z)]+$/
        },
        form_email: {
            email: true
        },
        form_telephone: {
            digits: true,
            minlength: 10,
            maxlength: 10
        }
    },

        messages: {
        form_firstname: {
            required: "",
            minlength: "Please enter at least {0} characters",
            regex: "Please avoid spaces and special characters"
        },
        form_name: {
            required: "",
            minlength: "Please enter at least {0} characters",
            regex: "Please avoid spaces and special characters"
        },
        form_email: {
            required: "",
            email: "Your email address must be in the format name@domaine.com"
        },
        form_telephone: {
            required: false,
            minlength: "Please enter 10 digits",
            maxlength: "Please enter 10 digits",
            digits: "Please use only numbers"
        },
        form_message: ""
        },

        submitHandler: function(form) {
            $('.btn-validate-group:visible').hide();
            $('.send-wait').fadeIn(300); 
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                success : function() {
                        $('.send-wait').hide(); 
                        $('.send-success').fadeIn(300); 
                      },
                error : function(){
                        $('.send-wait').hide(); 
                        $('.send-error').fadeIn(300);  
                      }
        });
        return false;
        }

});

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
});

Answer 1

对于 jQuery Validate 插件，一个字段将...

• 通过您指定的规则，这样它就“有效”。 (获取“有效”类并且没有消息)

或者

• 至少有一条您指定的规则未通过，因此该规则“无效”。 (获取“无效”类和错误消息)

有效与无效之间没有任何区别。

<小时/>

引用OP:

"For the telephone field, I would like that is not required but in the right format if it's filled (10 digits)."

这正是你的 jsFiddle 已经工作的方式。

在您的情况下，电话字段不是必需的，它是可选的。因此，当您将其留空时，它已通过验证...它是有效的...它不能是其他任何东西。

如果它没有留空，并且填写了字母或 10 个字符以外的任何内容，则它不符合您的规则，并被标记为“无效”。

引用OP:

"If the form is empty and if it's validated, why the green image is displayed (validClass) ?"

见上文。字段只能是有效或无效。只要留空，“可选”字段就被视为“有效”。

<小时/>

旁注:您可以使用或修改已作为一部分包含的电话规则之一，而不是数字和长度规则的the additional-methods.js file .

<小时/>

这是一个非常粗略的解决方法，只要该字段不是必需的且留空，它将绕过 valid 类。 (当字段在技术上有效时，这不是避免“有效”类的典型行为。)

我已将名为 可选 的类分配给电话字段，并使用highlight 和 unhighlight 回调功能如下...

highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
    if ($(element).hasClass('optional') && $(element).val() == '') {
        $(element).removeClass(errorClass).removeClass(validClass);
    } else {
        $(element).removeClass(errorClass).addClass(validClass);
    }
},

演示:http://jsfiddle.net/Y3GJr/3/

注意:此代码经过简化，因为如果表单具有 radio 元素，则该代码将无法正常工作。对于这种情况，请引用插件的默认回调函数并进行必要的添加。