jQuery Validate Plugin throws error when checking username

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/

register_username is undefined because you've listed it as a method/rule as register_username: true under the register_username field. register_username is not a method/rule, so it's undefined. — Sparky
– Sparky, Commented Aug 17, 2014 at 13:45

Stefan Koenen · Accepted Answer · 2014-08-17 12:09:00Z

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

Collectives™ on Stack Overflow

jQuery Validate Plugin throws error when checking username

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related