SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery validator plugin

    I am new to this and not finding much documentation that isn't written for the advanced. It's been a frustrating day to try to understand a little more about client side validation.

    In any event, I am able to use the validator if I simply put the code

    <script>
    $(document).ready(function(){
    $(".form-std").validate();
    });
    </script>
    in the head tag. I then class the form items and it seems to work okay. I can also add a .error style to the page head and it will style the errors to some extent.

    Is this how it is supposed to work and does it do more regarding formatting, etc. or do I have to write that using jQuery.

    Also, does anyone know any good tutorials on this? Thanks

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Formatting and styling the labels\inputs should be done with CSS. You can style them individually with something like this:

    Code CSS:
    <style type="text/css">
    input.error {
    font-weight: bold;
    }
     
    label.error {
    padding: 0px 0px 0px 10px;
    color: #000000;
    }
    </style>

    And have you checked out http://docs.jquery.com/Plugins/Validation?

    The validation plugin is a dream to use once you learn it. The layout is easy, say I wanted to validate a login form with the following HTML.

    Code HTML4Strict:
    <form method="POST" action="login.php" id="frmLogin">
    <p><label for="username">Username:</label><input type="text" name="username" /></p>
    <p><label for="password">Password:</label><input type="password" name="password" /></p>
    <input type="submit" value="Login" />
    </form>

    I would use the following jQuery code to do it.

    Code JavaScript:
    $(document).ready(function() {
    $('#frmLogin').validate({
    rules: {
    username: { required: true, minlength: 6 },
    password: { required: true, minlength: 6 }
    }
    });
    });

    Check out some of the examples at the link I posted above. Good luck

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I appreciate the input


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
  •