Question

My scenario is this:

I’m runing Contact Form 7 (contactform7.com). When a user have’nt set the required fields and pressed send (the form is sent with jQuery, so a page reload is’nt initiated) the Contact Form 7 script outputs a “error class” to the input field where the user have missed to fill out.

This class – which the Contact Form 7 have set – I want to grab. But it seems that hasClass() does’nt work on this. It just works on predefined classes.

My conclusion is that the class which hasClass() tries to grab is’nt available at some how when the whole page is’nt reloaded.

How do I solve this and can be able to grab the class?

Edit: I have this code

$('input:text, textarea').click(function() {
        $(this).css({'background' : '#fff'});
    });

If you have missed to fill out a required input/textarea and pressed “Send”, the field comes up with a red background (this is right). The above code makes them white on click (this is right). But if you forget to fill a required input/textarea the second time and pressed “Send”, the field you have forgot to write something in comes up as white (background) and not red (this is wrong).

My thoughts is that the above code overrides the other CSS classes. How do I avoid this?

Answer 1

As you said you are using contact form 7( i hope in wordpress) you can directly edit the javascript of the contactform7. so to make hasClass() working you should write it in that file by binding it with some event like for example on Click of submit button.

and for the error styling you should not add new inline styles because when the form is validated next time it will remove the applied error class(if no validation error are not there) and add error class (if validation error was there) but your style will retain there and override the applied class. So instead of adding new styles onclick of textarea or text box remove the applied error class for it

for example:-

$('input:text, textarea').click(function() {
        $(this).removeClass('your error class');
    });