Jquery validate plugin displaying one error at a time using css

Question

I want to know how I can display error messages at the bottom of the screen using the jquery module, validator plugin

It is also allowed to display one error at a time.

eg: -

name: the first error will have the name
email: - as soon as the name is confirmed, the email
error website will be displayed : - website error.

And how to select a text field of a field one by one in the same style:

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

<div id = 'error'>, if the name is empty, then only the display name is empty, if not, check your email and after that web / div>

I don’t know how the whole code will look.

Please provide a code snippet.

Thanks in advance

Dave

Answer 1

Try the following:

$("#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 lead to the loss of one error for one element inside the element with the identifier myErrorContainerand at the same time highlight the element that causes the error by adding a class to it .error.

Hope this helps!

Answer 2

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

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