JSFIDDLE: http://jsfiddle.net/c56z1674/ (error explanation at the end of this post)
My HTML (for simplification purposes I only included username field):
<form id="form_register_create" method="get" action="">
<input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
<input type="submit" id="form_register_create_submit" style="display:none">
</form>
My JS:
$('#form_register_create').validate({
// specify rules
rules : {
register_username : {
required : true,
register_username : true,
minlength : 3,
maxlength : 18,
remote : {
url : "../system/check-uniqueness-username.php",
type : "post"
}
}
},
// specify error messages
messages : {
register_username : {
required : "Please enter a username.",
register_username : "Please enter a username (between 3 and 18 chars).",
remote : "Username already in use!"
}
},
// when everything is valid, fire register function
submitHandler : function(form) {
register_create();
}
});
My PHP (check-uniqueness-username.php):
<?php
require_once 'db.php';
$username = trim(strtolower($_REQUEST['register_username']));
$results = $db -> query("SELECT * FROM users WHERE username = $username");
if(mysqli_num_rows($results) == 1) {
$valid = 'false';
}
else{
$valid = 'true';
}
echo $valid;
exit;
THE FOLLOWING ERROR OCCURS:
When I enter the username in the field and leave the field by clicking into another field, I get the following error message in my console:
Uncaught TypeError: Cannot read property 'call' of undefined
What I found out: This error does NOT OCCUR if I leave out the part "register_username : true" in the rules section of my validate script. But leaving this part out is not an option for me because in this case I will not be able to check the uniqueness of the username.
Does anyone have any idea how this error can be avoided? You can try out yourself by typing something in the username field and then clicking into the email field: http://jsfiddle.net/c56z1674/
I guess you were using the jQuery validation documentation example for this:
$( "#myform" ).validate({
rules: {
email: { // <----- email(1)
required: true,
email: true, // <----- email(2)
remote: "check-email.php"
}
}
});
The fieldnames are the same, but email(2) is a build in validation to check if the field contains a valid email. (Documentation)
So in your code, just remove the 'register_username : true,' as it's not an available option and your validation script will make the php call.
HTML:
<form id="form_register_create" method="get" action="">
<input type="text" id="register_username" name="register_username" placeholder="username" autocomplete="off" autofocus required>
<input type="submit" id="form_register_create_submit" style="display:none">
</form>
JS:
$('#form_register_create').validate({
// specify rules
rules : {
register_username : {
required : true,
minlength : 3,
maxlength : 18,
remote : {
url : "../system/check-uniqueness-username.php",
type : "post"
}
}
},
// specify error messages
messages : {
register_username : {
required : "Please enter a username.",
register_username : "Please enter a username (between 3 and 18 chars).",
remote : "Username already in use!"
}
},
// when everything is valid, fire register function
submitHandler : function(form) {
register_create();
}
});