Alist3r Alist3r - 4 months ago 11
Javascript Question

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

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

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