SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    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, but focusing with a mouse doesn't update the span HTML correctly.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks for the answer, but none of the demos provided on your reference is what I'm looking for.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    What are you looking for?

  5. #5
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    What are you looking for?
    As mentioned in my question, I'd like to display only the message related to the focused field.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That could mean a number of things. Focus is when the user clicks in the input. Then it has focus. So why would you want an error when the user clicks in the input. Try explaining differently.


Tags for this Thread

Bookmarks

Posting Permissions

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