Jquery.validate change background color

Question

0.00/5 (No votes)

See more:

hello
i use this code to validate my form

JavaScript

jQuery("form[class^='wpcf7-form']").validate({ 
rules:{ 
'your-name':{required:true,maxlength:50,minlength:4}, 
'your-subject':{required:true,maxlength:100,minlength:10}, 
'your-message':{required:true,maxlength:500,minlength:10}, 
'your-email':{required:true,eemail:true,maxlength:50} 
}, 
submitHandler: function(form) { 
form.submit(); 
}, 
errorPlacement: function (error, element) { 
element.css('background', '#ffdddd'); 
error.insertAfter(element); 
} 
});

if user enter wrong data so the background color changed to red
but if he correct the data he entered , background still red although message disappeared So how can i return back the background color to white if user fix the errors

Posted 9-Feb-15 1:17am

Hercal

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-02-09T04:11:00

Use the highlight and unhighlight methods to modify the element:

JavaScript

jQuery("form[class^='wpcf7-form']").validate({
    rules:{
        ...
    },
    
    // NB: This is the default behaviour, so isn't really required:
    submitHandler: function(form) {
        form.submit();
    },
    
    // Called when the element is invalid:
    highlight: function(element) {
        $(element).css('background', '#ffdddd');
    },
    
    // Called when the element is valid:
    unhighlight: function(element) {
        $(element).css('background', '#ffffff');
    }
    
    // NB: No need for the "errorPlacement" function.
});

Alternatively, use the errorClass to specify a CSS class which will be applied to invalid elements:

JavaScript

jQuery("form[class^='wpcf7-form']").validate({
    rules:{
        ...
    },
    
    errorClass: "invalid"
    
    // No need for "errorPlacement", "highlight" or "unhighlight".
});

CSS

input.invalid, textarea.invalid, select.invalid
{
    background-color: #ffdddd;
}

.validate() | jQuery Validation Plugin[^]