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

Valentin Flachsel · Accepted Answer · 2010-12-03 08:36:26Z

8

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 !

edited Dec 3, 2010 at 8:36

answered Dec 3, 2010 at 6:52

Valentin Flachsel

10.8k10 gold badges46 silver badges67 bronze badges

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

4 Comments

dave Over a year ago

Thanks FreeOne, The code snippet is working, but it's suppose to show the one error at a time, once the first validation is clear, then move to the others, also hightlighting is happening to all of them.

dave Over a year ago

Yes' it's displaying the one error at a time, but hightlight is not happening at all :(

Valentin Flachsel Over a year ago

@dave - Please see the updated answer. This should work properly now.

Valentin Flachsel Over a year ago

@dave: glad to be of help ! :)

Breezer · Accepted Answer · 2010-12-03 06:23:07Z

1

$("#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

answered Dec 3, 2010 at 6:23

Breezer

10.5k6 gold badges32 silver badges51 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related