jQuery Validator 将可选字段标记为“错误”

Question

我正在使用最新版本的 jQuery Validator plugin 以及 jQuery (1.6.2)。

我有一个简单的表单，其中包含一个可选的电话号码字段，名为Phone。当所有字段都是“必需的”时，以下代码可以完美运行。今天的问题是我添加了一个可选字段，而Validator似乎忽略了这个可选字段的规则。

HTML：

<div id="contact">
    <form id="contactForm" action="/cgi-bin/FormMail.pl" method="post">
        <input type="hidden" name="subject" value="Contact Form" />
        <input type="hidden" name="redirect" value="thankyou.html" />
        <input type="hidden" name="required" value="Name,email,Comments" />
        <input type="text" class="autoclear blur defaultInvalid" value="your full name" name="Name" /><br />
        <input type="text" class="autoclear blur defaultInvalid" value="your email address" name="email" /><br />
        <input type="text" class="autoclear blur defaultInvalid" value="your phone number" name="Phone" />
        <fieldset id="radioset">
            <input type="radio" id="radio-1" name="recipient" value="myEmail1@email.com" checked="checked" /><label for="radio-1">Label 1</label>
            <input type="radio" id="radio-2" name="recipient" value="myEmail2@email.com" /><label for="radio-2">Label 2</label>
            <input type="radio" id="radio-3" name="recipient" value="myEmail3@email.com" /><label for="radio-3">Label 3</label>
        </fieldset>
        <textarea class="autoclear blur defaultInvalid" name="Comments">your comments</textarea><br />
        <input type="submit" value="Send Message" />
    </form>
</div>

我使用 qTip2 在验证时指示必填字段。

一切（技术上）都在工作，正在验证，qTip 工具提示正在弹出。

整个问题是，尽管我的参数告诉它“电话”是可选的，但它仍然根据需要标记“电话”并弹出一个空白 qTip。我知道 qTip2 不是这里的问题，因为它只是在寻找 class="error"。我可以在 DOM 中看到验证器将class="error" 应用于可选字段，尽管我有我的规则。

（我知道required: false 是默认值，但由于这个问题，我还是添加了该规则。它仍然被忽略！）

谁能明白它为什么会这样做？

jQuery/JavaScript：

$(document).ready(function() {

    var nameMsg = "Please enter your full name.",
        emailMsg = "Please enter your email address.",
        emailMsgV = "This is not a valid email address.",
        commentsMsg = "Please enter your comments.";

    $('#contactForm').validate({
        onkeyup: false,
        validClass: 'valid',
        rules: {
            Name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            Phone: {
                required: false
            },
            Comments: {
                required: true
            }
        },
        messages: {
            Name: nameMsg,
            email: {
                defaultInvalid: emailMsg,
                required: emailMsg,
                email: emailMsgV
            },
            Comments: commentsMsg
        },
        success: function(error) {
            setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
                $('#contactForm').find('.valid').qtip('destroy');
            }, 1);
        },
        submitHandler: function(form) {
            form.submit();
        },
        errorPlacement: function(error, element) {
            $(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
                overwrite: false,
                content: error,
                position: {
                    my: 'bottom left',
                    at: 'top left',
                    viewport: $(window),
                    adjust: {
                        x: 25
                    }
                },
                show: {
                    event: false,
                    ready: true
                },
                hide: false
            }).qtip('option', 'content.text', error);
        } // closes errorPlacement
    }) // closes validate()    
}); // closes document.ready()

Answer 1

我发现了问题...

我错误地将defaultInvalid 类应用于可选 字段。呵呵！

它应该看起来像这样......

<input type="text" class="autoclear blur" value="your phone number" name="Phone" />

为清楚起见进行编辑：

defaultInvalid 是一种自定义验证器方法，用于验证 required input 字段，这些字段也预先输入了一些默认数据。由于这不是required 字段，因此没有理由使用此方法。