unobtrusive client validation in partial views

Question

I have a partial view which gets rendered within a jQuery UI dialog. Because it's dynamic content, unobrusive clientside validation wouldn't work. In order to get it, I have to force validator to parse form's content calling $.validator.unobtrusive.parse();. But it doesn't work. My browser reports that unobtrusive object is undefined. Why it's happening? Maybe there were some changes in jQuery library and now entire thing works differently. I'm using jquery-1.6

Answer 1

    (function($){

        CampusCommon.register("Campus.UI.Popup")
        Campus.UI.Popup=function(){
            defaults={
                action:'',
                ispartialaction:'',
                customcallback:'',
                confirmaction:'',
                controltoupdateid:'',
                width:500,
                title:'',
                onsubmit:function(id){
                    var popupid=id+"_popupholder";
                    if(this.ispartialaction){
                        $.ajax({
                            url:this.action,
                            type:"Get",
                            context: this,
                            data:$(this).find("form").serialize(),
                            success:function(data){
                                $('#'+id).parents('body').find('form').append("<div id='"+popupid+"'></div>");
                                var ajaxContext=this;
                                $("#"+popupid).dialog({
                                    autoopen:false,
                                    model:true,
                                    width:this.width,
                                    title:this.title,
                                    buttons:{
                                        "Confirm":function(){
                                            if(ajaxContext.customcallback==''){
                                                var popupform=$(this).find("form");
                                                if(popupform.valid()){
                                                    $.post(ajaxContext.confirmaction,popupform.serialize(),function(d){
                                                        if(d!='')
                                                        {
                                                            $.each(d,function(i,j){
                                                                switch(j.Operation)
                                                                {
                                                                    case 1:
                                                                        if($('#'+j.ControlClientID).is("select"))
                                                                        {
                                                                            $('#'+j.ControlClientID).val(j.Value);
                                                                            $('#'+j.ControlClientID).change();
                                                                        }
                                                                        else if($('input[name="'+j.ControlClientID+'"]').length>0)
                                                                        {
                                                                            $('input[name="'+j.ControlClientID+'"][value="'+j.Value+'"]').prop("checked",true);
                                                                        }
                                                                        break;
                                                                    case 2:
                                                                        if($('#'+j.ControlClientID).is("select"))
                                                                        {
                                                                            $('#'+j.ControlClientID).append("<option selected='selected' value=\""+j.Value+"\">"+j.Text+"</option>");
                                                                        }
                                                                        else
                                                                        {
                                                                            var len=$('input[name="'+j.ControlClientID+'"]').length;
                                                                            $('#'+j.ControlClientID+"list").append('<li><input type="checkbox" name="'+j.ControlClientID+'" value="'+j.Value+'" id="ae'+j.ControlClientID+len+'"/><label for "ae'+j.ControlClientID+len+'">'+j.Text+'</label>');
                                                                        }
                                                                        break;
                                                                    case 0:
                                                                        $('#'+j.ControlClientID).val(j.Value);
                                                                        breakl
                                                                    default:break;
                                                                }
                                                            });                                                                     

                                                            popupform.parent().dialog("destroy").remove();
                                                            $("#"+ajaxContext.controltoupdateid).change();
                                                        }
                                                    });
                                                }
                                            }
                                            else
                                            {
                                                executeByFunctionName(ajaxContext.customcallback,window,new Array());
                                            }
                                        },
                                        "Cancel":function(){
                                            $(this).dialog("close");
                                        }
                                    }
                                });
                                $("#"+popupid).dialog("open");
                                $("#"+popupid).empty().append(data);
                            },
                            error:function(e)
                            {
                                alert(e);
                            }
                        });
                    }
                    else
                    {
                        var frm=document.createElement("form");
                        frm.id="CampusForm";
                        frm.name="CampusForm";
                        frm.action=this.action;
                        frm.method="post";
                        var arr=$($("#"+id).closest("body").find("form")).serializeArray();
                        $.each(arr,function(i,j){
                            var hidd=document.createElement("input");
                            hidd.type="hidden";
                            hidd.name=j.name;
                            hidd.value=j.value;
                            frm.appendChild(hidd);});
                        document.appendChild(frm);
                        frm.submit();
                    }
                }
            },
            clicksubmit=function(){
                var opts=$(this).data("CampusPopup");
                opts.onsubmit($(this).attr("id"));
                return false;
            };
            return        {
                init:function(opt){
                    var opts=$.extend({},defaults,opt||{});
                    $(this).data('CampusPopup',opts);
                    $(this).bind("click",clicksubmit);
                }};
        }();
        $.fn.extend({CampusPopup:Campus.UI.Popup.init});
    })(jQuery)


    /*js*/
    1.7.1,1.5.1,validate,unobtrusive,8.20,common,popup.js



     [HttpGet]
            public ActionResult AddCourse(ViewModel.Batch batch)
            {
                return PartialView("~/Views/Admin/Course.cshtml", new ViewModel.Course());
            }

/*Layout*/
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/campuscommon.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/campus.ui.popup.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
       <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>


/*Batch*/
@model Campus.UI.Admin.Models.Batch

@{
    ViewBag.Title = "Batch";
}

<h2>Batch</h2>

@using (Html.BeginForm(Model.SubmitAction,Model.SubmitController)) {
    ViewContext.FormContext.ValidationSummaryId = "valSumId";
    @Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } });

    <fieldset>
        <legend>Batch</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.BatchName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BatchName)            
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Courses)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.CourseId,Model.Courses,"--Select a course")         
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.BatchDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BatchDescription)            
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")
}


/*Course*/
@model Campus.UI.Admin.Models.Course
@{
    ViewBag.Title = "Course";
}

<h2>Course</h2>

@using (Html.BeginForm()) {
    ViewContext.FormContext.ValidationSummaryId = "valSumId";
    @Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } });

    <fieldset>
        <legend>Course</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CourseName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CourseName)            
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CourseDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CourseDescription)            
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 2

You might find the following blog post useful.