SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    eschew sesquipedalians silver trophy sweatje's Avatar
    Join Date
    Jun 2003
    Location
    Iowa, USA
    Posts
    3,749
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery validataion plugin

    Hello all,

    Interested in doing some client side form validation and wanted to use the jQuery.validator plugin. I would also like to activate this validation programatically rather than with a submit button. I believe I am missing something fundamental, since I am unable to get the form to ever tell me it failed. Below is a simple test case of what I am trying to achieve:

    HTML Code:
    <html>
    <head>
    <title>test validation</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    
    <script type="text/javascript" >
    jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
            });
    </script>
    <script type="text/javascript" >
    $(document).ready(function(){
            $("testform").validate({
            rules: {
              x: {
               required: true,
               range: [0, 127]
              },
              y: { "required" }
            }
            });
    });
    </script>
    </head>
    <body>
    
    <div>
    <form id="testform" method="get" action="">
    <fieldset>
    <label for x>X</label>
    <input id="x" name="x" size="5" type="text" /><br/>
    <label for y>Y</label>
    <input id="y" name="y" size="5" type="text" /><br/>
    <button id="testformgo">go</button>
    <input type="submit" value="submit" /><br/>
    </fieldset>
    </form>
    </div>
    
    <script type="text/javascript" >
            $("#testformgo").button().click(function(){
              valid = $("#testform").validate().form();
              alert(valid);
            });
    </script>
    
    </body>
    </html>
    The submit always works and the "go" button always alerts "True" regardless of blanks in the "y" input or out of range values in the "x" input. Does anyone see what I am doing wrong?

    Regards,
    Jason
    Jason Sweat ZCE - jsweat_php@yahoo.com
    Book: PHP Patterns
    Good Stuff: SimpleTest PHPUnit FireFox ADOdb YUI
    Detestable (adjective): software that isn't testable.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    This is the line that's the cause of the problem:

    Code:
    $("testform").validate({
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    eschew sesquipedalians silver trophy sweatje's Avatar
    Join Date
    Jun 2003
    Location
    Iowa, USA
    Posts
    3,749
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    I saw something like
    HTML Code:
     y: { "required" }
    in the docs, but I see something about this in the error console, so I changed to
    HTML Code:
    		y: { 
    			required: true,
    		}
    along with adding
    HTML Code:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    so now I get no errors at all in the firefox js error console, however I still get the same behavior of always validating as true, even when I am expecting false.
    Jason Sweat ZCE - jsweat_php@yahoo.com
    Book: PHP Patterns
    Good Stuff: SimpleTest PHPUnit FireFox ADOdb YUI
    Detestable (adjective): software that isn't testable.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweatje View Post
    so now I get no errors at all in the firefox js error console, however I still get the same behavior of always validating as true, even when I am expecting false.
    What have you done about this?

    Code:
    $("testform").validate({
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    eschew sesquipedalians silver trophy sweatje's Avatar
    Join Date
    Jun 2003
    Location
    Iowa, USA
    Posts
    3,749
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What have you done about this?

    Code:
    $("testform").validate({
    Well... nothing. I guess I fail to see what is wrong with it which would require change. I did do
    HTML Code:
    alert( $("testform") );
    just before it and it says it is an object. What do you think needs to change?

    Regards,
    Jason
    Jason Sweat ZCE - jsweat_php@yahoo.com
    Book: PHP Patterns
    Good Stuff: SimpleTest PHPUnit FireFox ADOdb YUI
    Detestable (adjective): software that isn't testable.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweatje View Post
    Well... nothing. I guess I fail to see what is wrong with it which would require change. I did do
    HTML Code:
    alert( $("testform") );
    just before it and it says it is an object. What do you think needs to change?
    That is attempting to select an element called testform, such as <testform> or <p> or <div>
    You need it to select an element with the identifier of testform, which means that you need to use "#testform" instead of "testform"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    eschew sesquipedalians silver trophy sweatje's Avatar
    Join Date
    Jun 2003
    Location
    Iowa, USA
    Posts
    3,749
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, got it. without the # I was not going after the id of the element. Thank you.
    Jason Sweat ZCE - jsweat_php@yahoo.com
    Book: PHP Patterns
    Good Stuff: SimpleTest PHPUnit FireFox ADOdb YUI
    Detestable (adjective): software that isn't testable.


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
  •