jquery unobtrusive validation non working for dynamically loaded content in form

Question

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Microinvest.net.Models.ViewModels.SupportRusViewModel>" %>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("HelpRequest", "Form", FormMethod.Post, new {id ="formTrim" }))
   { %>
    <tr>
        <td>
            <label for="suggestion_suggestionMessage">
                <%= Resources.Dict.strSuggestionDescription%></label>
        </td>
        <td>
            <%= Html.TextAreaFor(x => x.suggestion.suggestionMessage, new { @class = "technicalQuestionTextArea" })%><span
                class="required">
                <br />
                <%= Html.ValidationMessageFor(m => m.suggestion.suggestionMessage)%></span>
        </td>
    </tr>
    <tr>
        <td>
            <label for="suggestion_systemDescription">
                <%= Resources.Dict.strSuggestionSystemDescription%></label>
        </td>
        <td>
            <%= Html.TextAreaFor(x => x.suggestion.systemDescription, new { @class = "technicalQuestionTextArea" })%><span
                class="required">
                <br />
                <%= Html.ValidationMessageFor(m => m.suggestion.systemDescription)%></span>
        </td>
    </tr>
    <% } %>

I am loading that partial view in that view:

<% Html.EnableClientValidation(); %>
            <% using (Html.BeginForm("HelpRequest", "Form"))
               { %>
            <%= Html.ValidationSummary(true) %>
            <center>
                <fieldset>
                    <table cellpadding="3">
                        <tr>
                            <td valign="middle" align="right">
                                <label for="names">
                                    <%= Resources.Dict.strNames%></label>:<span class="required"></span>
                            </td>
                            <td align="left" style="width: 300px;">
                                <%= Html.TextBoxFor(m => m.names)%><span class="required"><br />
                                    <%= Html.ValidationMessageFor(m => m.names)%></span>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" align="right">
                                <label for="city">
                                    <%= Resources.Dict.strOrganisation%></label>:<span class="required"></span>
                            </td>
                            <td align="left" style="width: 300px;">
                                <%= Html.TextBoxFor(m => m.city)%>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" align="right">
                                <label for="telephone">
                                    <%= Resources.Dict.phoneNumber%></label>:<span class="required"></span>
                            </td>
                            <td align="left" style="width: 300px;">
                                <%= Html.TextBoxFor(m => m.telephone)%><span class="required"><br />
                                    <%= Html.ValidationMessageFor(m => m.telephone) %></span>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" align="right">
                                <label for="email">
                                    <%= Resources.Dict.strEnterYourEmail%></label>:<span class="required"></span>
                            </td>
                            <td align="left" style="width: 300px;">
                                <%= Html.TextBoxFor(m => m.email)%><span class="required"><br />
                                    <%= Html.ValidationMessageFor(m => m.email) %></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <%= Resources.Dict.strQuestionType %>:
                            </td>
                            <td>
                                <%=Html.RadioButtonFor(m => m.questionType, "techinicalQuestion", new {@checked = "checked", @class = "questionType" })%>
                                <%= Resources.Dict.strTechnicalQuestion%>
                                <%=Html.RadioButtonFor(m => m.questionType, "suggestion", new { @class = "questionType" })%>
                                <%= Resources.Dict.strSuggestion %>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div id="typeOfQuestion">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2">
                                <input id="register_button" type="submit" value="<%= Resources.Dict.strSend %>" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <br />
            </center>
            <% } %>

i am using that javascript for the job:

    function pageLoad() {
        $("#typeOfQuestion").load("/Form/TechnicalQuestionPartial");
        $(".questionType").click(function () {
            var UrlPass;
            if ($(this).val() === "techinicalQuestion") {
                UrlPass = "/Form/TechnicalQuestionPartial";
                //            $('#typeOfQuestion').load("/Form/TechnicalQuestionPartial");
            } else if ($(this).val() === "suggestion") {
                UrlPass = "/Form/SuggestionPartial";
                //            $('#typeOfQuestion').load("/Form/Suggestion");
            }
            $.ajax({
                url: UrlPass,
                success: function (data) {
                    $('#typeOfQuestion').html(data);
                    $('#typeOfQuestion').html($("#formTrim").html());
                    validateAjaxForm();
                }
            });
        });


    function validateAjaxForm() {

        $('#form0').removeData('validator');
        $('#form0').removeData('unobtrusiveValidation');
        $.validator.validate('#form0');
        $('#form0').validate().form();
//        $("form").removeData("validator");
//        $("form").removeData("unobtrusiveValidation");
//        $.validator.unobtrusive.parse("form");
//         $('#form0').validate();
    }
};

form0 is the id of the form in the non partial view which is rendered the problem is that

$('#form0').removeData('validator');
        $('#form0').removeData('unobtrusiveValidation');
        $.validator.validate('#form0');
        $('#form0').validate().form();

isnt turning on the validation of the dynamically inputed content

What do you mean i am first loading 1 view and then when client clicks on a radio button $(".questionType").click(function () i am loading 1 of 2 partial views and i need to validate the fields in the dynamically loaded partial view too. What diffrence would it make if i am using html.beginForm or html.ajaxForm,If am removing the form with jquery after loading — user1503425, Jul 06 '12 at 11:06
Possible duplicate of [unobtrusive validation not working with dynamic content](https://stackoverflow.com/questions/14902581/unobtrusive-validation-not-working-with-dynamic-content) — kevinpo, Sep 21 '17 at 14:42

score 1 · Answer 1 · answered Jul 06 '12 at 09:24

1

You could try calling:

$.validator.unobtrusive.parse($("form"));

Which should hopefully enable the validation for the dynamically added content.

answered Jul 06 '12 at 09:24

Ian Routledge

4,012
1
23
28

$.validator.unobtrusive.parse($("form")); it doesnt work for me – user1503425 Jul 06 '12 at 10:12

jquery unobtrusive validation non working for dynamically loaded content in form

1 Answers1