Joe Joe - 4 months ago 10
Javascript Question

"this[0] is undefined" message using jQuery validate plugin

I've started to use the jQuery validate plugin. I was having a few issues with the display of the error messages and wanted to create a test page where I could experiment with a few things. Despite the same setup working for me yesterday, I'm now getting the follwing message:

this[0] is undefined


looking at the jQuery code, it fails in the following section (specific line highlighted):

valid: function() {
if ( $(this[0]).is('form')) {
return this.validate().form();
} else {
var valid = true;
**var validator = $(this[0].form).validate();**
this.each(function() {
valid &= validator.element(this);
});
return valid;
}
}


from looking at it, it must think that my validator isn't a form, but it is. Don't really understand what's going on. The code only fails when try to print out the result of the valid() method to the console. Here's my code so far. Grateful for any help.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
th {
text-align: center;
}
.labelCol {
width: 60px;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.full.js"></script>
<script type="text/javascript" src="jquery.validate.full.js"></script>
<script type="text/javascript">
$('#myform').validate({
rules: {
thisval: "required"
}
});
console.info($('#myform').valid());
</script>
</head>

<body>
<form id="myform" name="myform" action="" method="post">
<table>
<tr>
<th colspan="2">Header Section</th>
</tr>
<tr>
<td class="labelCol">This Title</td>
<td class="valueCol">
<input type="text" name="thisval" id="thisval"
maxlength="45" size="45" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
</tr>
</table>
</form>
</body>
</html>

Answer

Your #myform form is not loaded when the script is executed, so $('#myform') doesn't match anything. Wrap your script in a ready event handler.

<script type="text/javascript">
   $(function() { // <-- add this
      $('#myform').validate({
                    rules: {
                        thisval: "required"
                    }
      });
      console.info($('#myform').valid());
   });
</script>