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
