I am pretty new to asp.net MVC. I have a problem in attaching client side validation errors to validation summary list in MVC. On the client side submit click function, the validation-summary-errors div is always empty even if there are validation errors in form.
Let me explain in detail with code snippet.The snippet that I have provided is my sample application.
I have enabled clientside validation in my application trhough web.config and included the default jquery validations library in my layout page.
@Scripts.Render(~/bundles/jquery)
@Scripts.Render(~/bundles/jqueryui)
@Scripts.Render(~/bundles/jqueryval)
MVC View
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<fieldset>
<legend>Registration Form</legend>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
</li>
</ol>
<input type=submit value=Register id=btnSubmit />
</fieldset>
}
View Model is below
public class RegisterModel
{
[Required]
[Display(Name = User name)]
public string UserName { get; set; }
[Required]
[StringLength(100, ErrorMessage = The {0} must be at least {2} characters long., MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = Password)]
public string Password { get; set; }
[DataType(DataType.Password)]
[Display(Name = Confirm password)]
[Compare(Password, ErrorMessage = The password and confirmation password do not match.)]
public string ConfirmPassword { get; set; }
}
Script file that I have used is below.
<script type=text/javascript>
$(function () {
$(#btnSubmit).click(function (e) {
e.preventDefault();
var errorSummary = $('.validation-summary-errors');
if (errorSummary.length == 0) {
$('#listError').remove();
$('<div class=validation-summary-errors></div>').insertAfter($('.validation-summary-valid'));
$(.validation-summary-errors).append(<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>);
}
else if (errorSummary.length == 1) {
$('#listError').remove();
$(.validation-summary-errors).append(<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>);
}
return false;
});
});
</script>
When I don't have jquery submit click function everything works fine as expected. Model valiadtions are fired in client side on submit click.
In addition to model validations I also have some jquery client side validations that need to be appended to existing list of validation summary. But validation-summary-errors div is always empty in submit click function. So every time the $('.validation-summary-errors').length is 0.
Can someone help me understand where am I going wrong?
Updated code
$(function () {
$(#btnSubmit).click(function (e) {
var IsValid = validateForms();
if (!IsValid) {
e.preventDefault();
}
});
});
function validateForms() {
var blnValid = false;
var valMsg = ValidateDynamicControls();
if ($('#MemberForm').valid()) {
$(.validation-summary-errors).empty();
blnValid = true;
}
if (valMsg != '') {
blnValid = false;
var errorSummary = $('.validation-summary-errors')
if (errorSummary.length == 1 && errorSummary[0].innerHTML != '' && errorSummary[0].innerHTML != undefined) {
$(.validation-summary-errors ul).append(valMsg);
} else {
$('#listError').remove();
$('<div class=validation-summary-errors></div>').insertAfter($('.validation-summary-valid'));
$(.validation-summary-errors).append(<ul id='listError'> + valMsg + </ul>);
}
}
return blnValid;
}
function ValidateDynamicControls() {
var strAliasValMsg = 'The string is not valid.';
return strAliasValMsg;
}
