Menu
OK, I give up. After trying endless permutations of inline functions, callbacks, return parameters, I still cannot get this to behave how I want. Any help would be appreciated.
Current status: everything works except the 'checkEmail' error message. The javascript popups convey the proper messages to the user, but the field will not show any error message, whether true or false is returned by the handlers.
The desired outcome is that if the JSON payload from the AJAX call is anything other than a 200, to pop a Javascript alert and highlight the field as invalid with the appropriate error message. Currently, it pops the alerts, but doesn't mark the field as invalid.
(Sorry, this is jQuery 1.7 + jquery.validation plugin)
Our JSON response payloads look like this:
{"message": "Email is not in use.", "code": 200, "email": "[email protected]"}
or
{"message": "Duplicate email address detected", "code": 401}
<html>
<head>
<script>
// You'd think this should be false, but no
// Also it apparently needs to be a quoted
// string: http://stackoverflow.com/a/11496502/814669
var checkEmailStatus = "true";
// Success Handling
checkEmailSuccess = function(data, textStatus, jqXHR) {
checkEmailStatus = "true";
switch (data.code) {
case 200:
checkEmailStatus = "false"; // Nothing set here matters
return false; // Return valued from here don't matter
case 401:
alert("Sorry, our system has detected that an account with this email address already exists.");
break;
case undefined:
alert("An undefined error occurred.");
break;
default:
alert("An undefined error occurred.");
break;
}
return checkEmailStatus;
};
// Error Handling
checkEmailError = function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 404) {
alert("Could not find the API Server (404). We apologize for the inconvenience.");
} else {
alert("Terrible things have happened" + textStatus);
}
return false;
};
// The Validator
jQuery.validator.addMethod("checkEmail", function(value, element) {
$.ajax({
type: "POST",
cache: "false",
async: "false",
url: "/json/checkEmail",
dataType: "json",
data: {
email: function() {
return $("email").val();
}
},
success: checkEmailSuccess,
error: checkEmailError
});
// Seems checkEmailStatus value never gets changed:
return checkEmailStatus;
}, "Email Address Problem");
// The Binding
$(document).ready(function(){
$('#MyForm').validate({
onfocusout: false,
onkeyup: false,
rules: {
"email": {
required: true,
minlength: 2,
maxlength: 42,
email: true,
checkEmail: true
}
}
});
});
</script>
</head>
<body>
<!-- the Form -->
<form id="MyForm">
<input type="text" name="email"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
992
The correct answer here is to indeed use the "remote" option, but do all of your response processing using "dataFilter":
checkEmailSuccess = function(response) {
switch (jQuery.parseJSON(response).code) {
case 200:
return "true"; // <-- the quotes are important!
case 401:
alert("Sorry, our system has detected that an account with this email address already exists.");
break;
case undefined:
alert("An undefined error occurred.");
break;
default:
alert("An undefined error occurred");
break;
}
return false;
};
"email": {
required: true,
minlength: 2,
maxlength: 42,
email: true,
remote: {
url: "/json/checkEmail",
type: "POST",
cache: false,
dataType: "json",
data: {
email: function() { return $("#email").val(); }
},
dataFilter: function(response) {
return checkEmailSuccess(response);
}
}
},
The addMethod expects a true/false response inmediately and you are doing an AJAX call which is an async operation so the variable checkEmailStatus will return its initial value. Please look into "remote" validation, this is what you need:
http://jqueryvalidation.org/remote-method/
Update: I just noticed the async = false. Try to avoid that option. It reduces the user experience.
Try this:
$('#MyForm').validate({
onfocusout: false,
onkeyup: false,
rules: {
"email": {
required: true,
minlength: 2,
maxlength: 42,
email: true,
//checkEmail: true
remote:{
url: "/json/checkEmail", //make sure to return true or false with a 200 status code
type: "post",
data: {
email: function() {
return $("email").val();
}
}
}
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
