CODEWITHSUNDEEP
jqueryjquery-validate
sp1
sp1

Reputation: 5

jQuery Validate Plugin invalid makes input disappear

I have a simple form that requires an email to be confirmed, it works great if there are no errors. But if I submit with errors jquery validation plugin is adding a display:none to the confirm-email input. It does not add a invalid class not sure whats going on.

JS:

$("#customer-info").validate({
                         debug:true,
                         errorElement: "",
                         submitHandler: function(form) {
                             //TODO need a processing image
                             $.post(form.action, $(form).serialize(), function(result) {
                                 if(result > 0){
                                         // do some stuff
                                     }
                             },"json")
                             return false;
                         }
                });

html: 

<form id="customer-info">
    <label for="customer-name">Name</label>
        <input type="text" id="customer-name" name="customer-name" placeholder="first last name" class="required" /><br />
        <label for="customer-email">Email</label>
        <input type="text" id="customer-email" name="customer-email" placeholder="[email protected]" class="required email" /><br />
        <label for="confirm-email">Confirm Email</label>
        <input type="text" id="confirm-email" name="confirm-email" placeholder="[email protected]" class="required email" equalTo="#customer-email" /><br />
        <label for="notes">Notes</label>
        <textarea id="notes" name="notes" placeholder="Any additional details or changes."></textarea><br />
        <center><input type="submit" value="Go" class="btn-go" /></center>
</form>

http://docs.jquery.com/Plugins/Validation

Upvotes: 0

Views: 1254

Answers (1)

Sparky
Sparky

Reputation: 98718

It seems to work fine when I remove debug: true and errorElement: ''.

You break it when you define errorElement as '' (nothing).

By default, it's errorElement: 'label'.

Working Demo: http://jsfiddle.net/vHKha/

$(document).ready(function () {
    $("#customer-info").validate({
        submitHandler: function (form) {
            //TODO need a processing image
            $.post(form.action, $(form).serialize(), function(result) {
                if(result > 0){
                    // do some stuff
                }
            },"json")
            return false;
        }
    });
});

Side note: You also may want to validate your HTML. <center></center> has been deprecated for many years.

Upvotes: 1

Related Questions