jquery validate plugin, display one error at a time with css

Question

I want to know that how can I display the error messages on the bottom of the screen by using the jquery,validator plugin

also it's suppose to display the one error at a time.

for eg:-

name:- first error will be of name
email:- once name is validated then email's error will be displayed
website:-finally website's error.

And how to highlight the textbox of the field one by one same style:

< input type="text" name="name" >
< input type="text" name="email" >
< input type="text" name="website" >

< div id='error' >if name is blank then display only name is blank, if not then check for email and after that website< /div >

I don't know the how the whole coding is going to look like.

Please provide the coding snippet.

Thanks in advance

Dave

Answer 1

Try this:

$("#myForm").validate({
    // Validation rules and messages go here

    showErrors: function(errorMap, errorList) {
        $("#myForm").find("input").each(function() {
            $(this).removeClass("error");
        });
        $("#myErrorContainer").html("");
        if(errorList.length) {
            $("#myErrorContainer").html(errorList[0]['message']);
            $(errorList[0]['element']).addClass("error");
        }
    }
});

This will place one error at a time inside an element that has a myErrorContainer ID, and at the same time will highlight the element that is causing the error by adding a .error class to it.

Hope this helps !

Answer 2

$("#myform").validate({
  wrapper: "li",
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv' );
   },
   debug:true
 })

replace errordiv with the id or class or whatever selector you have for the element you want to put the errors in