Using jquery and trying to change error messages with css

Question

I have a form and I want to change the font size and colour of the error messages in css but I can't figure out how to do it.

$(document).ready(function() {
   $("#form1").validate({ 
      rules: {  
         credit: {
         required:true,
         creditcard: true
      },
      amount: { 
         required: true,
         min:(15),
      },
      firstname: "required",// simple rule, converted to {required:true} 
      surname: "required",// simple rule, converted to {required:true}   
      name2: "required",// simple rule, converted to {required:true}    
      surname2: "required",// simple rule, converted to {required:true}     
      name3: "required",// simple rule, converted to {required:true}  
   },

These are the messages, I don't want them to be the same size and colour as the form inputs and need to figure out how to change them

      messages: {
         firstname: "Please enter a first name",
         surname: "Please enter a surname",
         name2: "Please enter a first name",
         surname2: "Please enter a surname",
         name3: "Please enter a name",
      }      
   });
});

You haven't given any indication of how you've tried to set size & colour using CSS (or the HTML that this code works with), which makes it difficult to know what sort of answer you need. — James Aylett
– James Aylett, Commented Jan 20, 2013 at 18:42
use label.error in your css to customize jQuery.validate error messages. — Fabrício Matté
– Fabrício Matté, Commented Jan 20, 2013 at 18:42

hohner · Accepted Answer · 2013-01-20 18:42:23Z

3

By default with the jQuery validate plugin, when you attempt to post a form with errors, it adds the classname error to all form elements which have failed validation. So:

<input type="text" name="firstname"/>

Will become:

<input type="text" name="firstname" class="error"/>

To change the styles, use something like this:

.error {
   color: red;
   font-size: 12px;
}

answered Jan 20, 2013 at 18:42

hohner

11.6k8 gold badges51 silver badges85 bronze badges

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

1 Comment

user1944305 Over a year ago

Thank you, I was wondering why .error was being used in other answers.

Collectives™ on Stack Overflow

Using jquery and trying to change error messages with css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related