MVC 3 Remote Validation jQuery error on submit
- by Richard Reddy
I seem to have a weird issue with remote validation on my project. I am doing a simple validation check on an email field to ensure that it is unique.
I've noticed that unless I put the cursor into the textbox and then remove it to trigger the validation at least once before submitting my form I will get a javascript error.
e[h] is not a function jquery.min.js line 3
If I try to resubmit the form after the above error is returned everything works as expected. It's almost like the form tried to submit before waiting for the validation to return or something.
Am I required to silently fire off a remote validation request on submit before submitting my form?
Below is a snapshot of the code I'm using: (I've also tried GET instead of POST but I get the same result). As mentioned above, the code works fine but the form returns a jquery error unless the validation is triggered at least once.
Model:
public class RegisterModel
{
[Required]
[Remote("DoesUserNameExist", "Account", HttpMethod = "POST", ErrorMessage = "User name taken.")]
[Display(Name = "User name")]
public string UserName { get; set; }
[Required]
[Display(Name = "Firstname")]
public string Firstname { get; set; }
[Display(Name = "Surname")]
public string Surname { get; set; }
[Required]
[Remote("DoesEmailExist", "Account", HttpMethod = "POST", ErrorMessage = "Email taken.", AdditionalFields = "UserName")]
[Display(Name = "Email address")]
public string Email { get; set; }
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 8)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 8)]
[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
public string ConfirmPassword { get; set; }
[Display(Name = "Approved?")]
public bool IsApproved { get; set; }
}
public class UserRoleModel
{
[Display(Name = "Assign Roles")]
public IEnumerable<RoleViewModel> AllRoles { get; set; }
public RegisterModel RegisterUser { get; set; }
}
Controller:
// POST: /Account/DoesEmailExist
// passing in username so that I can ignore the same email address for the same user on edit page
[HttpPost]
public JsonResult DoesEmailExist([Bind(Prefix = "RegisterUser.Email")]string Email, [Bind(Prefix = "RegisterUser.UserName")]string UserName)
{
var user = Membership.GetUserNameByEmail(Email);
if (!String.IsNullOrEmpty(UserName))
{
if (user == UserName)
return Json(true);
}
return Json(user == null);
}
View:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Content/web/js/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/Content/web/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Content/web/js/jquery.validate.unobtrusive.min.js"></script>
......
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="titleh">
<h3>Edit a user account</h3>
</div>
<div class="body">
@Html.HiddenFor(model => model.RegisterUser.UserName)
@Html.Partial("_CreateOrEdit", Model)
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(model => model.RegisterUser.IsApproved)</span>
@Html.RadioButtonFor(model => model.RegisterUser.IsApproved, true, new { @class = "uniform" }) Active
@Html.RadioButtonFor(model => model.RegisterUser.IsApproved, false, new { @class = "uniform" }) Disabled
<div class="clear"></div>
</div>
<div class="button-box">
<input type="submit" name="submit" value="Save" class="st-button"/>
@Html.ActionLink("Back to List", "Index", null, new { @class = "st-clear" })
</div>
</div>
}
CreateEdit Partial View
@model Project.Domain.Entities.UserRoleModel
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(m => m.RegisterUser.Firstname)</span>
@Html.TextBoxFor(m => m.RegisterUser.Firstname, new { @class = "st-forminput", @style = "width:300px" })
@Html.ValidationMessageFor(m => m.RegisterUser.Firstname)
<div class="clear"></div>
</div>
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(m => m.RegisterUser.Surname)</span>
@Html.TextBoxFor(m => m.RegisterUser.Surname, new { @class = "st-forminput", @style = "width:300px" })
@Html.ValidationMessageFor(m => m.RegisterUser.Surname)
<div class="clear"></div>
</div>
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(m => m.RegisterUser.Email)</span>
@Html.TextBoxFor(m => m.RegisterUser.Email, new { @class = "st-forminput", @style = "width:300px" })
@Html.ValidationMessageFor(m => m.RegisterUser.Email)
<div class="clear"></div>
</div>
Thanks,
Rich
