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
