Why isn't validation done on the client side but not on the server side?
Right now I have a form with multiple fields and on submit, I want to check if the username is accepted or not. If done, do nothing (show validation error), if you do not, successfully proceed to the next form.
Here's what I've done so far:
View:
var RequestCreateAccount_Submit = function () {
var res = false;
ValidationAttribute.BlankValue(true);
var form = $('form#RequestCreateAccount');
$.validator.unobtrusive.parse(form);
var res = form.valid();
var data = form.serialize();
if (res) {
$.ajax({
url: Url.getFullUrl('Account/RequestCreateAccount_Submit'),
type: 'Post',
data: data,
cache:false,
success: function (data) {
//Next Dialog
},
error: AjaxLog.HandleAjaxCallFail
});
}
return res;
}
Controller:
[AllowAnonymous]
[HttpPost]
public ActionResult RequestCreateAccount_Submit(UserAccount userAccount)
{
//Check if username is unique
if (!WebSecurity.UserExists(userAccount.UserName))
{
UserSession.AddValue(StateName.CreateOrEditAccount, "CurrentUserAccount", userAccount);
JsonResult res = Json(new { Success = true, data = "", Message = "" });
return res;
}
JsonResult jres = Json(new { Success = false, data = "", Message = "Username is already registered"});
return jres;
}
I tested it with a known username and it hit the success = false line (outside the if line) and it didn't get inside the if statute. So I know that server side validation works.
However, I am wondering why on the client side it still has success = true and the following dialog popped up. This did not fail to verify. What am I doing wrong on the client side?
source to share
The reason is that your controller actually returns a result successfully. A successful result simply indicates an error. While logically similar at this point, they are very different. The error will be reserved for actual exceptions or 404 no type of current script type.
You should check the status of the response inside your success callback function
$.ajax({
url: Url.getFullUrl('Account/RequestCreateAccount_Submit'),
type: 'Post',
data: data,
cache:false,
success: function (data) {
if(data.Success === false){
AjaxLog.HandleAjaxCallFail();
// this may not make as much sense though
// as the request didn't actually fail, just the action did
//TODO: code for name fail
return;//do not process next dialog
}
//Next Dialog
},
error: AjaxLog.HandleAjaxCallFail
});
source to share
success = false
of your result object does not mean that the request failed. It stands only for data.success
, nothing more. Resquest is still successful (HTTP 200) which I believe is the correct response code. If you return an error code, for example new HttpStatusCodeResult(404, "error message");
, it means that your request failed, but it is incorrect.
You are requesting work regardless of the result of the check. So you can check this in your callback success
instead of the callback error
:
success: function(data) {
if (data.success) {
//Next Dialog
}
else {
// error message
}
}
source to share