PDA

View Full Version : Form won't submit after new method added to jquery validate plugin



GoDawgs
24 Feb 2011, 04:30 PM
Okay, I was able to fix the problem I was having in my last thread: http://www.webdevforums.com/showthread.php?43069-Issue-using-remote-for-rules-in-jquery.validate()-plugin-to-check-for-duplicate and really didn't want to start a new thread, but couldn't find a way to edit the title.

I am now having a new problem. My form won't submit. I submits fine when I remove the added method, but then my form won't check for duplicate emails and usernames. Any ideas why this might be? Let me know if any more information would help.

I was able to get around the remote problem by adding the following method to the validator:




jQuery.validator.addMethod("duplicate", function(value, element, params) {
var validator = this;
params.data[element.name] = value;
$.post(params.url, params.data, function(response) {
if (response == 'true'){
var errors = {};
validator.showErrors(errors);
return true;
}else {
var errors = {};
errors[element.name] = response;
validator.showErrors(errors);
return false;
}
}, 'text');
}, '');



Then, I implemented the validation like this:




$("#sign_up").validate({
rules: {
onfocusout: true,
username: {
required: true,
equals: "username",
minlength: 5,
duplicate: {
url: "checkuname.php",
data: {username: $("#req-name").val()}
}
},
email: {
required: true,
email: true,
equals: "email",
duplicate: {
url: "checkemail.php",
data: {email: $("#req-email").val()}
}
},
pass1: {
minlength: 5,
required: true,
equals: "password"
},
pass2: {
equalTo: "#req-password",
equals: "password"
}
},
messages: {
username: {
required: "Please include a username<br>",
minlength: "Please enter a username with more than 5 characters<br>",
equals: "Please enter a username<br>"
},
email: {
required: "Please enter an email address<br>",
email: "The email address you entered was not valid, please try again<br>",
equals: "Please enter an email address<br>"
},
pass1: {
minlength: "Please enter a password that is longer than 5 characters<br>",
required: "Please enter a password<br>",
equals: "Please enter a password<br>"
},
pass2: {
equalTo: "Both your passwords did not match. Please try again<br>",
equals: "Please enter a password<br>"
}
},
errorLabelContainer: "#messageBox",
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function(){
$("#signup_content").fadeOut('slow', function(){
// animation done
});
}
});
}
});