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中看到Validator正在将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字段，因此没有理由使用此方法。

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

1 个答案: