ASP.NET/MVC: Knockout-binding preventing client-side validation from being performed?

问题

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?

来源：https://stackoverflow.com/questions/44458268/asp-net-mvc-knockout-binding-preventing-client-side-validation-from-being-perfo

标签

asp.net-mvc

validation

knockout.js

client-side