Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    196
    Thanks
    22
    Thanked 0 Times in 0 Posts

    jQuery validation: display the focused field error message

    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:
    1. If you click the submit button, the container(span) shows the first error message, no matter which field was focused.
    2. 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.
    Last edited by Rain Lover; 11-20-2012 at 12:19 PM.

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    196
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itborg View Post
    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.

    after you click on submit - there is no input focused
    The first field automatically gets the focus.

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •