how to clear error when using jquery validate and custom errorPlacement

Question

I am using jquery and validate to validate my form. Instead of adding an element to the missing field I am adding a border to the element using this option errorPlacement

$("#signup-form").validate({
       submitHandler: function(form) {
      form.submit();
   },
   errorPlacement: function(error, element) {
      element.css("border", "solid 1px red");
   }                    
});

the one thing i can not seem to figure out is how to clear it when valid?

So I started with the above code. Then tried and i am confused with the results. If I do not have the success: option when a field fails it adds the class successfully. But as soon as I add the success option all the required fields are getting that class, and if I inspect the element I see <input class="required invalid valid"> so I am doing something incorrectly.

           $("#signup-form").validate({
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    //form.submit();
                },
                errorPlacement: function(error, element) {
                    element.addClass("invalid");
                },        
                success: function(error) {
                    // change CSS on your element(s) back to normal
                },                    
                 debug:true
            });

Normally, by default, the error clears itself. Please explain more and/or show a demo of your problem. — Sparky
– Sparky, Commented Aug 28, 2012 at 15:43
i am adding the code above. so when a field fails instead if adding aa new element i am just changing the border of the missing field to red. if i put in the info and leave the field it still has the border. — randy
– randy, Commented Aug 28, 2012 at 15:46
You can refer to the answer here: stackoverflow.com/questions/3518895/… The success option has a callback which you can use to disable the label's border. — user1512616
– user1512616, Commented Aug 28, 2012 at 16:36

Sparky · Accepted Answer · 2012-08-28 17:30:37Z

7

You could try adding this to your list of .validate() options...

success: function(error) {
    // change CSS on your element(s) back to normal
}

This should work dynamically without a form submit. As soon as the error is resolved, the contained code will run.

See documentation.

Please create a demo of your problem using jsFiddle. Here's a blank jsFiddle with .validate() already included and ready for use.

EDIT

As per OP's jsFiddle, I made these changes...

    errorPlacement: function(error, element) {
        $(element).filter(':not(.valid)').addClass("invalid");
    },
    success: function(error) {
        console.log(error);
        $("#signup-form").find('.valid').removeClass("invalid");
    }

Working Demo: http://jsfiddle.net/u3Td3/6/

Side-notes: You also had some HTML issues. You should "self-close" your input elements with />. Same thing for the submit button, self-close rather than using a </input>. See validator.w3.org to validate your HTML. I'd also not use a table for layouts, use CSS.

edited Aug 28, 2012 at 17:30

answered Aug 28, 2012 at 15:47

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sparky Over a year ago

@randy, since I can't see your HTML or your page, I can't write an exact solution. Use jsFiddle to create a demo of your problem. Here's a blank jsFiddle with .validate() already included and ready for use.

randy Over a year ago

thanks you example works except when the text fields are pre-filled. getting closer jsfiddle.net/paries/u3Td3/8

Sparky Over a year ago

I don't think that's anything to do with success, custom error placement, or your original question. The new question is 'why is the invalid class being applied to non-empty fields on submit?'

Sparky Over a year ago

I'm glad I could help with this part at least.

Huy Nguyen · Accepted Answer · 2021-11-25 13:59:13Z

0

<form id="signupForm">
    <div class="form-group">
        <label for="contact">Your Name <em>(required)</em></label>
        <input type="text" class="form-control" id="contact" name="contact" placeholder="Name" required>
    </div>
</form>

$('#serviceForm').validate({
    errorPlacement: function (error, element) {
        element.parent().addClass("hasError");
    },
    success: function (error, element) {
        $(element).parent().removeClass("hasError");
    }
})

answered Nov 25, 2021 at 13:59

Huy Nguyen

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

how to clear error when using jquery validate and custom errorPlacement

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related