Missing link somewhere for MVC client-side validat

问题:

I'm using client-side validation in an MVC project, but the way I'm using it is a little complicated and so I think I've missed something somewhere that is causing a break in the chain of things you need to set up in order for it to work.

As I understand it, this is the complete picture:

1. You need to have the following JS libraries loaded: jQuery, jQuery Validate, and Microsoft Unobtrusive Validation
2. You need to enabled client-side validation, and unobtrusive validation, in the Web.config.
3. You need to apply some validation attributes to your model.
4. You need to include some kind of display for the errors in your view.

I believe I've done all this, but there are some parts of my particular solution that complicate things, and maybe someone can help me sort it out.

In my case, I've included all of the JS libraries. I've checked that my Web.config looks like this:

<configuration>
    [...]
    <appSettings>
        [...]
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
        [...]
    </appSettings>
    [...]
</configuration>

I have applied some validation attributes to my model:

public class CreateStudentEventViewModel : IValidatableObject
{
    [Required]
    public DateTime StartDate { get; set; }
}

And I have included a display for the validation results in my view:

@using (Html.BeginForm([...]))
{
    [...]
    @Html.ValidationSummary()
    [...]
}

However, when I click the submit button, a normal submit occurs. I suspect this is because of how I'm managing form submits. I'm actually loading the form via AJAX into a modal. I suspect what's happening is that because the form doesn't exist in the DOM on page load, MVC isn't attaching its submit listener to the form correctly.

So without further ado, my question is:

Is there a way to manually attach the unobtrusive validation submit listener or to manually trigger the unobtrusive validation?

OR

Am I on the wrong track, and something else is wrong?

回答1:

You have not shown the files you included, but they need to be jquery.{version}.js, jquery.validate.js and jquery.validate.unobtrusive.js.

But the problem is that your adding dynamic content to the page. When the page is first loaded, jquery.validate.unobtrusive parses the forms controls and generates the validation rules for each element. If you add further form controls to the DOM, you need to re-parse the validator so client side validation can be applied to those controls.

$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));