ASP.NET MVC Client Side Validation With Dynamic Contents

https://weblogs.asp.net/imranbaloch/asp-net-mvc-client-side-validation-with-dynamic-contents

https://weblogs.asp.net/imranbaloch/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc




https://stackoverflow.com/questions/14902581/unobtrusive-validation-not-working-with-dynamic-content






  var form = $("#frm_Indication");

        form.removeData("validator");

        $.validator.unobtrusive.parse(form);
        SetMGHvalidation();
        $(form).validate();

        var isValid = $(form).valid();


        if (isValid) {

            $("#btnCommit").removeAttr('disabled');

            SetConfirmTableData(6);
            SetConfirmPage();

            $("#cfm_Ind").show();
            $('#accordion').hide();


        }
        else {
            $("#accordion").accordion({ active: 0 });
        }
    });

    function SetMGHvalidation() {


        if ($("#ddlIndSourceId").chosen().val() == 2) {
            $(".valide").each(function (i, ele) {
                $(ele).rules('remove', 'required');
                $(ele).removeClass('input-validation-error');
                $(ele).parent('div').find('.field-validation-error').empty();
                $(ele).validate();
                $(ele).valid();
            });
        }
        else {
            $(".valide").each(function (i, ele) {
                $(ele).removeData("validator");
                $(ele).rules("add", {
                    required: true
                });

                $(ele).validate();
                $(ele).valid();



            });
        }
        $(".valide").trigger("chosen:updated");


    }


 $("#ddlIndSourceId").chosen().change(function () {

        if ($("#ddlIndSourceId").chosen().val() == 2) {
            $(".valide").each(function (i, ele) {
                $(ele).rules('remove', 'required');
                $(ele).removeClass('input-validation-error');
                $(ele).parent('div').find('.field-validation-error').empty();
                $(ele).validate();
                $(ele).valid();
            });
        }
        else {
            $(".valide").each(function (i, ele) {
                $(ele).removeData("validator");
                $(ele).rules("add", {
                    required: true
                });

                $(ele).validate();
                $(ele).valid();



            });
        }
        $(".valide").trigger("chosen:updated");

    });

==================================================

What you could do when you add dynamic element to the form is either

1. You could remove the form's validation and re validate it like this:

   var form = $(formSelector)
       .removeData("validator") /* added by the raw jquery.validate plugin */
       .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
   
   $.validator.unobtrusive.parse(form);

2. Access the form's unobtrusiveValidation data using the jquery data method:

   $(form).data('unobtrusiveValidation')

   then access the rules collection and add the new elements attributes (which is somewhat complicated).