CODEWITHSUNDEEP
jqueryjquery-validate
randy
randy

Reputation: 1877

jquery , validator invalid class being applied to non-empty fields on submit

I have a form where i am using jquery and validate. I am using errorPlacement in the validate to put a border around required fields that are missing. it seems to work as i would like except when the fields are pre-filled. When the form is submitted, The validate marks the pre-filled text fields are invalid. if I give focus and then leave the field the pre-filled fields will all remove the borders. See example at http://jsfiddle.net/paries/u3Td3/8/

Upvotes: 1

Views: 1563

Answers (2)

ChrisThompson
ChrisThompson

Reputation: 2008

you can check for an error text before placement.

    errorPlacement: function(error, element) {
        if(error.text().length>0){
            $(element).filter(':not(.valid)').addClass("invalid");
        }
    },

Upvotes: 1

Nate
Nate

Reputation: 4958

Just change your CSS to hang off of .error, which is the class jQuery validate uses by default to indicate invalid fields.

Your problem is happening because of order: your :not('.valid') check gets run before the valid classes have been added. If you inspect your prepopulated inputs after clicking "continue" in your example, you'll find that they have both invalid and valid as classes.

http://jsfiddle.net/u3Td3/12/

Upvotes: 0

Related Questions