jQuery validation: display the focused field error message

Rain Lover · 11-19-2012, 01:22 PM

Objective: I'd like to display the focused field error message in a container.

What I've done so far:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label {display:inline-block; width:60px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").validate({
messages: {
     name: "Please specify your name.",
     email: {
       required: "We need your email address to contact you.",
       email: "Your email address must be in the format of name@domain.com."
     },
     url: "A valid URL, please.",
     comment: "Please enter your comment."
   },
showErrors: function(errorMap, errorList) {
        if(errorList.length) {
            $("span").html(errorList[0].message);
        }
    }
});
});
</script>
</head>
<body>
<span></span>
<form action="#">
<div><label for="entry_0">Name *</label><input type="text" class="required" name="name" id="entry_0"></div>
<div><label for="entry_1">Email *</label><input type="text" class="required email" name="email" id="entry_1"></div>
<div><label for="entry_2">URL</label><input type="text" class="url" name="url" id="entry_2"></div>
<div><textarea class="required" name="comment" rows="7" cols="35"></textarea></div>
<div><input type="submit" name="submit" value="Submit"></div>
</form>
</body>
</html>

Demo: http://dl.dropbox.com/u/4017788/Labs/sample-form.html

Problems:

If you click the submit button, the container(span) shows the first error message, no matter which field was focused.
Focusing on fields using the Tab key works well (except on the URL field), but focusing with a mouse doesn't update the span HTML correctly.

itborg · 11-23-2012, 03:10 PM

Hii rain.
About problem 1 - when click on submit , you shuold display all errors , and not only the error for the input that was focused. by the way - after you click on submit - there is no input focused.. so if you want only the last one that was focused you should save it in some variable.
For showing all errors use this code :

Code:

showErrors: function (errorMap, errorList) {
                if (errorList.length) {
                    var errors = errorList[0].message;
                    for (var i = 1; i < errorList.length; i++) {
                        errors += "<br/>" + errorList[i].message
                    }
                    $("span").html(errors);
                }
            }

About problem 2 - i found some hack, don't sure if that is the "perfect" solution but is work like using the Tab key.

Code:

$("form input , form textarea").click(function () {
      $(this).focusout().focus();
});

Hope that help

Rain Lover · 11-23-2012, 05:50 PM

Quote:

Originally Posted by itborg

when click on submit , you should display all errors , and not only the error for the input that was focused.

Thanks for the suggestion, but I'd prefer to show the one related to the focused field.

Quote:

after you click on submit - there is no input focused

The first field automatically gets the focus.

Quote:

i found some hack, don't sure if that is the "perfect" solution but is work like using the Tab key.

It doesn't work in my case.