jquery - jquery.validate：无法读取 null 的属性“nodeType”

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

---

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

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

---

引用 OP 评论：

“我正在呼吁”validateRegistration()的.click()事件#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');
    }
});

Answer 2

我刚刚遇到了这个错误的另一个实例。它在一个带有“名称”属性<form>的<label>标记中，该属性等于要验证的字段之一。从已解决的问题中删除“名称”属性<label>（无论如何它都不应该存在）。

Answer 3

检查您的表单是否具有“novalidate”属性。如果有，请将其删除。例子：