"this[0] is undefined" message using jQuery validate plugin_问答_开发者

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

开发者 https://www.devze.com 2023-03-17 03:34 出处：网络

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 t

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">
      开发者_StackOverflow社区              <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>

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>

Wrap your code in a document ready function such as:

$(function()
{

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

});

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;
    });

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