How to add custom css to blank/errors fields in jQuery validation plugin?

Question

Sorry to ask this type of question but i'm very new to jQuery validation plugin

The plugin is doing all good, but I want that all those input fields having errors/blank should have a red border, how to achieve this through jQuery validation plugin

By default jQuery validate adds a class of error to fields which are invalid, so you can just put whatever styling you need on that class. — Rory McCrossan
– Rory McCrossan, Commented May 6, 2016 at 10:29
as pointed out @RoryMcCrossan use css .error{ border: 1px solid red; } — pumpkinzzz
– pumpkinzzz, Commented May 6, 2016 at 10:31
@RoryMcCrossan: Yes i did this but it is not applying class to the blank input fields. only the label tags are appearing red — ashwintastic
– ashwintastic, Commented May 6, 2016 at 10:33

Md Mahfuzur Rahman · Accepted Answer · 2016-05-06 10:40:11Z

1

I think you are looking for something like this: See DEMO

The code is here: Example Code

JS:

/* Fire Valaidate */
$(document).ready(function(){
   $("#form").validate({
      rules: {
         name: {
            required: true
               }
         },
         messages: {
            name: "Required Field"
         }
     });
});

CSS:

#form label.error {
    color:red;
}
#form input.error {
    border:1px solid red;
}

HTML:

<form id="form" method="" action="">
    <label for="name">Name</label>
   <input type="text" id="name" name="name">
</form>

edited May 6, 2016 at 10:40

answered May 6, 2016 at 10:36

Md Mahfuzur Rahman

2,3693 gold badges20 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

How to add custom css to blank/errors fields in jQuery validation plugin?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related