Advanced Search

Results 1 to 8 of 8

Thread: jQuery validation: display the focused field error message

  1. #1
    Join Date
    Nov 2009
    Posts
    177
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default 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 10:23 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Sorry, I'm personally not familiar with the jQuery validation plugin or its usage requirements/documentation. I'm assuming its an external-to-DD-script?

    I was just about to ask you for a link to the plugin and your own page, but following a quick serch on "jquery.validate", I found that you'd posted your question on the jQuery help forums too: http://forum.jquery.com/topic/jquery...-error-message

    I think that's probably the best place to ask for an answer - at the source rather than asking for generic help from the DD forum.
    Last edited by Beverleyh; 11-19-2012 at 01:49 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I was playing around with it just a little bit and found things improved a little just by updating to jQuery 1.6.4.

    I'd suggest going to:

    http://bassistance.de/jquery-plugins...in-validation/

    and getting the latest version of the validator script (1.10 I think it is, you have 1.9), and running it with the latest version of jQuery (you have 1.6.1, it's up to 1.8.3).

    You will also find there a link to the docs and other interesting things like working examples.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2009
    Posts
    177
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    I think that's probably the best place to ask for an answer - at the source rather than asking for generic help from the DD forum.
    I'm afraid that forum isn't active and I haven't received any answers yet.

  5. #5
    Join Date
    Nov 2009
    Posts
    177
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Lightbulb

    Quote Originally Posted by jscheuer1 View Post
    I was playing around with it just a little bit and found things improved a little just by updating to jQuery 1.6.4.

    I'd suggest going to:

    http://bassistance.de/jquery-plugins...in-validation/

    and getting the latest version of the validator script (1.10 I think it is, you have 1.9), and running it with the latest version of jQuery (you have 1.6.1, it's up to 1.8.3).

    You will also find there a link to the docs and other interesting things like working examples.
    Eureka! I just re-checked the validate options and realized I should have used errorPlacement instead of showErrors:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    label.pre {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."
       },
    errorPlacement: function(error, element) {
    element.focus(function(){
    $("span").html(error);
    }).blur(function() {
    $("span").html('');
    });
    }
    });
    });
    </script>
    </head>
    <body>
    <form action="#">
    <span></span>
    <div><label class="pre" for="entry_0">Name *</label><input type="text" class="required" name="name" id="entry_0"></div>
    <div><label class="pre" for="entry_1">Email *</label><input type="text" class="required email" name="email" id="entry_1"></div>
    <div><label class="pre" for="entry_2">URL</label><input type="text" class="url" name="url" id="entry_2"></div>
    <div><textarea class="required" name="comment" id="entry_3" rows="7" cols="35"></textarea></div>
    <div><input type="submit" name="submit" value="Submit"></div>
    </form>
    </body>
    </html>
    I wonder what you think. Any revision/improvement, please?
    Last edited by Rain Lover; 11-24-2012 at 07:20 AM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Like I said, update to all the latest versions of the scripts involved (the validation one and jQuery).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2009
    Posts
    177
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Like I said, update to all the latest versions of the scripts involved (the validation one and jQuery).
    Sure I will. Thanks for the pointers!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Great. It's no guarantee but often later versions take care of bugs, so insofar as this might be a bug, updating might fix it.

    Plus it allows us to both be working from the same set of docs that apply to the version at hand if we have to take this further.

    Very often with jQuery plugins, if you have a decent grasp jQuery and how these things are generally authored, armed as well with the docs - if the thing can be made to do what you want it to do, one or more ways of getting there become apparent.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Field validation w/js and jquery
    By sme in forum JavaScript
    Replies: 2
    Last Post: 03-12-2012, 05:04 PM
  2. Replies: 2
    Last Post: 03-14-2009, 06:19 PM
  3. Replies: 1
    Last Post: 10-26-2008, 04:27 PM
  4. Validation Script & Error Message Help
    By Jus S in forum JavaScript
    Replies: 1
    Last Post: 07-29-2008, 03:30 PM
  5. Display an error message when viewed with FireFox
    By fred2028 in forum Looking for such a script or service
    Replies: 1
    Last Post: 07-14-2007, 10:18 PM

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
  •