This is a follow-up to, or rather replacement for, this question: MVC/ASP.NET: Client side validation not working
The issue was, and is, that my ASP.NET/MVC client-side validation isn't being performed, even though it should.
Now that I've done more testing, it seems I have identified the core of the problem, so here goes.
I have a ViewModel as follows:
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
// some other properties...
}
And a corresponding form in my View (again, only showing code for the email field):
@model Treinen2.Models.RegisterViewModel
@{
ViewBag.Title = "Register";
}
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
}
And this works fine, no problem at all.
HOWEVER, now I put this very same form inside a DIV element that contains a Knockout-binding, as follows:
<div data-bind="if: model.getoondePagina().register">
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new {
@class = "form-horizontal", role = "form" }))
{
<!-- Here goes exact same form as above -->
}
</div>
And unfortunately, inside this DIV, the client-side validation no longer works.
That is to say, the correct HTML (with the correct validation-attributes) is still being generated, but the actual error messages (like after typing a non-valid email-address, or leaving the field empty) no longer appear. I also note that the Knoutout-binding, in and of itself, works perfectly. And so does the MVC client-side validation UNTIL I put it inside the Knockout-bound DIV. So apparently no other issues present, it really seems the Knockout-binding is the only culprit, or rather the interaction between Knockout and client validation.
So I think my issue is this: why does the Knockout-binding somehow prevent the client-side validation from being performed?