CODEWITHSUNDEEP
jquerycssvalidation
user1944305
user1944305

Reputation: 153

Using jquery and trying to change error messages with css

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",
      }      
   });
});

Upvotes: 0

Views: 4764

Answers (1)

hohner
hohner

Reputation: 11578

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;
}

Upvotes: 3

Related Questions