jquery.validate : Cannot read property 'nodeType' of null

Question

我有这个小注册表

<h2>Please Register Your Account</h2>
                <div class="form-horizontal" id="idFormRegistrazione">
                    <div class="form-group">
                        <label id="labelUsername" for="idUsername" class="col-sm-2 col-xs-2 control-label">Username*</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="text" class="form-control" id="idUsername" placeholder="Username" name="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="labelName" for="idName" class="col-sm-2 col-xs-2 control-label">Name</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="text" class="form-control" id="idName" placeholder="Name" name="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="labelSurname" for="idSurname" class="col-sm-2 col-xs-2 control-label">Surname</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="text" class="form-control" id="idSurname" placeholder="Surname" name="surname">
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="labelEmail" for="idEmail" class="col-sm-2 col-xs-2 control-label">E-mail*</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="text" class="form-control" id="idEmail" placeholder="Email" name="email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="labelPassword" for="inputPassword" class="col-sm-2 col-xs-2 control-label">Password*</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="labelPasswordConf" for="idPasswordConf" class="col-sm-2 col-xs-2 control-label">Repeat Password*</label>
                        <div class="col-sm-10 col-xs-10">
                            <input type="password" class="form-control" id="idPasswordConf" placeholder="Repeat Password" name="passwordConf">
                        </div>
                    </div>

                    <p class="text-right" style="color: #E64040;"><b>* Campi Obbligatori</b></p>

                    <div id="idDivErrori">
                        <div id="idErroriRegistrazione">
                            <ul></ul>
                        </div>
                    </div>

                    <button id="idBtnRegister" class="btn btn-lg btn-primary btn-block" type="submit">Register Me</button>

这是 jquery.validate 插件的规则

<script type="text/javascript">

$(document).ready(function () {

            $('#idFormRegistrazione').validate({
                onsubmit: false,
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                errorContainer: "#idDivErrori",
                errorLabelContainer: "#idDivErrori #idErroriRegistrazione ul",
                wrapper: 'li',
                ignore: '',
                rules: {
                    username: {
                        required: true,
                    },
                    name: {
                        required: false,
                    },
                    surname: {
                        required: false,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    password: {
                        required: true,
                    },
                    passwordConf: {
                        required: true,
                        equalTo: '#idPassword'
                    }
                },
                messages: {
                    username: {
                        required: 'Username is Required'
                    },
                    email: {
                        required: 'Email is Required',
                        email:  'Email format is not valid'
                    },
                    password: {
                        required: 'Password is required',
                    },
                    passwordConf: {
                        required: 'You have to Confirm your password',
                        equalTo: 'Confirm your Password Please'
                    }   
                }
            });
        });

        function validateRegistration() {
            var is_valid_form = $('#idFormRegistrazione').validate().form();    
            if (is_valid_form) {            
                return true;
            }
            else {
                return false;
            }
        }
</script>

但是当我调用函数 validateRegistration() 时，我收到错误:

无法读取 null 的属性“nodeType”

我真的不知道为什么。请帮助我

Answer 1

您的数据输入元素未正确包含在 div 中(“伪形式”)...

<div class="form-horizontal" id="idFormRegistrazione">

您必须将输入元素包含在一组 <form> 中标签。

<form class="form-horizontal" id="idFormRegistrazione">

<小时/>

测试表单并返回 bool 值的方法是 .valid() .

function validateRegistration() {
    var is_valid_form = $('#idFormRegistrazione').valid();    
    if (is_valid_form) {            
        return true;
    } else {
        return false;
    }
}

<小时/>

引用OP评论:

"I'm calling validateRegistration() on .click() event of #idBtnRegister"

为什么？

submitHandler将自动为您捕获提交按钮的点击。

$('#idFormRegistrazione').validate({
    // your rules and options,
    rules: {
        ....
    },
    messages: {
        ....
    },
    submitHandler: function(form) {
        // optional
        // only fires on a valid form
        alert('form is valid');
        return false;  // block normal submit action if using ajax here
    },
    invalidHandler: function(event, validator) {
        // optional
        // only fires on an invalid form
        alert('form is invalid');
    }
});