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

回答1:

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>

回答2:

Wrap your code in a document ready function such as:

$(function()
{

    $('#myform').validate({
                    rules: {
                        thisval: "required"
                    }
    });
    console.info($('#myform').valid());

});

回答3:

Same happened here. For me it was a typo in my code:

$(document).ready(function(){
    //START of validate
$('#reply').validate({
    rules:{
        message:{
            required: true,
            },  
        },
    submitHandler: function(form) {
        var data = $("#reply").serialize();
        $.ajax({
            type:"POST",
            url:"ajax/scripts/msg_crt.php",
            data:data,
            success:function(data){
                alert("Loaded");
                }
            });
        }
    });
    //END of validate
  });

$(document).on('click','#send', function(){
    if($('#replay').valid()){// <--- Here is my selector typo
        $("#replay").submit(); // <--- Here is my selector typo
        }
        return false;
    });

回答4:

Im my case it happens when you miss to specify the id in form tag where you did specified in validate method.

来源：https://stackoverflow.com/questions/6546958/this0-is-undefined-message-using-jquery-validate-plugin

标签

jquery

jquery-validate