...

View Full Version : jQuery addMethod



mikespence
01-17-2011, 04:26 PM
Hi!

So I am using jQuery validate to validate my form.

I have added a custom rule to it that checks for username availiability.

The code is:



<script type="text/javascript" charset="utf-8">
$.validator.addMethod("uniqueUserName", function(value, element) {
$.ajax({
type: "POST",
url: "../wp-content/themes/freshserve/check.php",
data: "username="+value,
dataType: "html",
success: function(msg){
$("#mike").html(msg);
return msg;
}
});
});

$("#signup_form").validate({
debug: true, //prevent submission for testing
rules: {
username: {
uniqueUserName: true
}
},
messages: {
username: {
uniqueUserName: "Username Taken"
}
}
});
</script>


It updates the div id mike to be true or false which is what I return from the php script but even if the username is available is still displays the message 'Username Taken'.

How to stop this happening if the username is availiable?

Thanks!

Spudhead
01-17-2011, 05:15 PM
What I'd do is:

1. Try swapping:
return msg;
for
return true;
and
return false;
just to confirm that returning true or false is making the validation script behave as required.

2. If that's confirmed, then your AJAX call isn't returning what you expect it to. I'd guess that's its returning the string "false" which, if I'm not mistaken, can be interpreted as true. Try instead:

return (msg.toLowerCase() == 'true') ? true : false;

which will return an actual boolean value.

mikespence
01-17-2011, 05:41 PM
Thanks for the reply.

I tried changing it to:



$.validator.addMethod("uniqueUserName", function(value, element) {
$.ajax({
type: "POST",
url: "../wp-content/themes/freshserve/check.php",
data: "username="+value,
dataType: "html",
success: function(msg){
$("#mike").html(msg);
return (msg.toLowerCase() == 'true') ? true : false;
}
});
});

$("#signup_form").validate({
debug: true, //prevent submission for testing
rules: {
username: {
uniqueUserName: true
}
},
messages: {
username: {
uniqueUserName: "Username Taken"
}
}
});


and then


$.validator.addMethod("uniqueUserName", function(value, element) {
$.ajax({
type: "POST",
url: "../wp-content/themes/freshserve/check.php",
data: "username="+value,
dataType: "html",
success: function(msg){
$("#mike").html(msg);
return true;
}
});
});

$("#signup_form").validate({
debug: true, //prevent submission for testing
rules: {
username: {
uniqueUserName: true
}
},
messages: {
username: {
uniqueUserName: "Username Taken"
}
}
});


neither worked...

my php code is:



if(isSet($_POST['username']))
{
$username = strtolower($_POST['username']);

//connect to database
require_once("database_date.php");

$sql_check = mysql_query('SELECT username FROM tbl_users WHERE MD5(username) ="'. strtolower(md5($username)) .'"');

if(mysql_num_rows($sql_check) > 0)
{
echo 'true';
}else{
echo 'false';
}
}

Spudhead
01-17-2011, 06:43 PM
Doh. My bad.

You're doing an AJAX request, which is asynchronous by default. This means that your validation function is returning before the AJAX request has returned a response.

You can do a synchronous request by setting it in your AJAX params. See this near-identical post (http://stackoverflow.com/questions/2628413/jquery-validator-and-a-custom-rule-that-uses-ajax).

mikespence
01-17-2011, 11:39 PM
Thanks again.

Still not working though.

Here is my current code:



<script type="text/javascript" charset="utf-8">
$.validator.addMethod("uniqueUserName", function myValidator(value, element) {
var isSuccess = false;

$.ajax({
url: "../wp-content/themes/freshserve/check.php",
data: "username="+value,
async: false,
datatype: "html",
success:
function(msg) { isSuccess = msg === "true" ? true : false }
});
return isSuccess;
});


$("#signup_form").validate({
debug: true, //prevent submission for testing
rules: {
username: {
uniqueUserName: true
}
},
messages: {
username: {
uniqueUserName: "Username Taken"
}
}
});

</script>

mikespence
01-18-2011, 12:13 AM
Also, since adding

async: false,

it's slowed the browser down quite a lot so while typing a username it doesn't always register every key press



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum