Highlighting invalid form inputs

Question

I have been working on creating a form with a set of fields like username, passwords etc.... I want to make validation when the SUBMIT button is clicked.

I'm trying to get alert from my border color. All fields are valid my border must change into Green color If it has any errors it should change to red color.

Any one has any ideas regarding to my problem

If anyone has any suggestion??

Answer 1

You can use jquery plugin.... here you are. JQuery Form validation custom example

Answer 2

Use jQuery validation plugin: http://docs.jquery.com/Plugins/Validation

In this plugin, you have to define validation rules for the field. You can also set the error messages for given field for given validation rule.

This plugin adds classes to valid and invalid field.

You have to give the css for that class.

For example:

$(document).ready(function(){
        $(".my_form").validate({
                    rules:{  // validation rules
                            email_address: {
                                required:true,
                                email: true
                            },
                            password:{
                                minlength: 6
                            },
                            confirm_password: {
                                         equalTo:"#password"
                            }
                    },
                    messages: {
                        email_address: {
                           required: "Please enter email address",
                           email: "Please enter valid email address",
                       },
                       /*
                          likewise you can define messages for different field 
                          for different rule.
                       */
                    }
                    errorClass: "signup_error",  
                     /*This is error class that will be applied to 
                      invalid element. Use this class to style border. 
                      You can give any class name.*/
                });
      });

Once you click on submit button, and field is invalid, the plugin adds class to the element that you have specified as errorClass, and when you enter valid value in the field, the plugin will remove this class and will add 'valid' class by default.

You can use these two classes to style valid and invalid element using simple element.

.valid {
   border-color:"green"
}

.signup_error {
  border-color:"red"
}

Hope this resolves your problem.