jQuery validataion plugin

JavaScript
1

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>
<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

2

This is the line that’s the cause of the problem:

$("testform").validate({
3

Thanks for the reply.

I saw something like

 y: { "required" }

in the docs, but I see something about this in the error console, so I changed to

		y: { 
			required: true,
		}

along with adding

<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.

4

What have you done about this?

$("testform").validate({
5

Well… nothing. I guess I fail to see what is wrong with it which would require change. I did do

alert( $("testform") );

just before it and it says it is an object. What do you think needs to change?

Regards,
Jason

6

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”

7

Ah, got it. without the # I was not going after the id of the element. Thank you.