Question

I’m using the latest version of the jQuery Validator plugin along with jQuery (1.6.2).

I have a simple form with an optional field for phone number called Phone. The following code works flawlessly when all fields are “required”. The problem today is that I added an optional field and Validator seems to be ignoring the rules for this optional field.

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="[e-mail]" checked="checked" /><label for="radio-1">Label 1</label>
            <input type="radio" id="radio-2" name="recipient" value="[e-mail]" /><label for="radio-2">Label 2</label>
            <input type="radio" id="radio-3" name="recipient" value="[e-mail]" /><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>

I use qTip2 to indicate the required fields upon validation.

Everything (technically) is working, it’s validating and the qTip Tooltips are popping up.

The whole problem is that, despite my parameters telling it that “Phone” is optional, it keeps flagging “Phone” as required and popping up a blank qTip. I know qTip2 is not the issue here because it’s just looking for class="error". I can see in the DOM that the Validator is applying class="error" to the optional field despite my rules.

(I know required: false is the default but I added that rule anyway because of this issue. It’s still ignored!)

Can anyone see why it would be doing this?

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

I found the problem…

I was mistakenly applying the class defaultInvalid to the optional field. Doh!

It should look like this instead…

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

EDIT for clarity:

defaultInvalid is a custom Validator method used for validating required input fields which also have some default data pre-entered. Since this is not a required field, there’s no reason to use this method.