ASP.NET ClientValidation doesn't work on forms generated with jQuery.ajax

Question

I have a list of objects and when I click on one of them, I open a Popup (DevExpress PopupControl) containing the inputs filled correctly accordingly to the object clicked.

To render this, I make a AJAX call, (jQuery.ajax) that replaces the 'body' of the popup and then opens it; the server answers with a partial view containing the entire form):

        var $self = $(this);
        var _idSoc = $self.data("id");

        var options = {
            url: "@Url.Action("GetPopupEditSoc", "Home")",
            type: "post",
            data: { idSoc: _idSoc }
        };

        $.ajax(options)
        .done(function (data) {
            $(".container-popupEdit").empty().append(data);
            PopupEditSociete.Show();
            $.validator.unobtrusive.parse(document);
        })
        .fail(function (data) {
            console.log("Error: ", data);
        });

The problem it that creating a popup in this way I lose the validation on the Client side.

I've already tryed (of course, all the scripts are in the current page) - $.validator.unobtrusive.parse(document); - on Ajax.BeginForm Options, onSuccess doesn't work.. it is never called

THE CONTENT OF THE POPUP:

    @{
        Html.EnableClientValidation();
        Html.EnableUnobtrusiveJavaScript();
    }

    @using (Ajax.BeginForm("ModificationSociete", "Home",
        new AjaxOptions
    {
        OnSuccess = "console.log('???')",
        OnBegin = "AjaxFormEditSoc_OnBegin",
        OnComplete = "AjaxFormEditSoc_OnComplete",            
        UpdateTargetId = "container-EditSocForm",
        InsertionMode = InsertionMode.Replace
    },
    new
    {
        id = "FormModificationSoc"
    }))
    {

    <div style="padding: 10px;" id="container-EditSocForm"> ......

Any ideas????

score 0 · Answer 1 · edited May 23 '17 at 12:11

To turn unobtrusive JavaScript mode on/off and enable/disable client validation by default for the entire application, you can use Web.config:

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

You can also turn them on or off with code:

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

In addition to setting the flag, you will also need to include three script files:

jQuery (~/Scripts/jquery-1.4.1.js)
jQuery Validate (~/Scripts/jquery.validate.js),
jQuery Validate for unobtrusive (~/Scripts/jquery.validate.unobtrusive.js)

Please refer below link for more info:

http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

ASP.NET MVC 3: Required steps for unobtrusive client-side validation of dynamic/AJAX content

All these options have already been set.. I've also write in the view: Html.EnableClientValidation(); Html.EnableUnobtrusiveJavaScript(); But it's not here the problem... I cannot understand what I miss or what I've changed — Matteo Gariglio, Jun 06 '14 at 11:25

ASP.NET ClientValidation doesn't work on forms generated with jQuery.ajax

1 Answers1