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

Question

I've this little registration form

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

And this rules for the jquery.validate plugin

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

But when i'm call the function validateRegistration() i got the error:

Cannot read property 'nodeType' of null

Really i don't know why. Please Help me

Answer 1

Your data input elements are improperly contained within a div ("pseudo-form")...

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

You MUST enclose your input elements within a set of <form> tags.

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

---

The method to test the form and return a boolean value is .valid().

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

---

Quote OP comment:

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

Why?

The submitHandler will automatically capture the click of the submit button for you.

$('#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

I just encountered another instance of this error. It was in a <form> that had a <label> tag with a 'name' attribute that was equal to one of the fields to be validated. Removing the 'name' attribute from the <label> resolved it (it shouldn't have been there anyway).