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插件，字段将...

传递您指定的规则，然后它就是“有效”。（获取“有效”class且没有消息）

OR

至少失败了您指定的一条规则，因此它“无效”。（获取“无效”class和错误消息）

有效和无效之间没有任何内容。

引用OP：

“对于电话领域，我希望这不是必需的，但如果填写（10位数），则格式正确。”

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

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

如果它没有留空，并填写了10个字符以外的字母或其他任何字符，则表示您的规则失败并被标记为“无效”。

引用OP：

“如果表格是空的并且如果它已经过验证，为什么会显示绿色图像（validClass）？”

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

旁注：您可以使用或修改已包含在the additional-methods.js file中的一部分的电话规则，而不是digits和length规则

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

我已将class optional分配给电话字段，并使用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);
    }
},

DEMO：http://jsfiddle.net/Y3GJr/3/

注意：此代码已简化，因为如果表单包含radio个元素，它将无法正常工作。对于这种情况，请参阅插件的默认回调函数并进行必要的添加。

Answer 2

这是可能的解决方案fiddle
你已经忘记了输入类

<input type="text" name="form_telephone" id="form_telephone" class="required requis-image"placeholder="Your phone number" />

我还稍微修改了你的jQuery代码，看看小提琴我希望它可以帮到你。

验证jQuery插件，不需要字段

2 个答案: