检查用户名时，jQuery Validate Plugin会引发错误

Question

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/

Answer 1

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.

JSFiddle

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