asp.net mvc3 jquery ui dialog and client validation

Question

I have problem with client validation in asp.net mvc3 application.

My code looks :

function loadEditCategoryDialog(categoryId) {
    $.ajax({
        url : "/rovastamp3/Admin/CategoryEditDialog",
        data : "categoryId="+categoryId,
        success : function(data){
            $("#popup_dialog").html(data);
            $("#popup_dialog").dialog({        
                modal: true,
                draggable: false,
                resizable: false,
                title: "Upravit kategorii",
                width: 600,
                height: 500,
            });                             
        }
    });
 }

Controller :

[HttpGet]
public ActionResult CategoryEditDialog(int categoryId)
{
    CategoryEditViewModel categoryEditViewModel = new CategoryEditViewModel();
    categoryEditViewModel.Category = _postAuctionCategoryRepo.Query()
        .SingleOrDefault(x => x.Id == categoryId);

    return PartialView(categoryEditViewModel);
}

[HttpPost]
public ActionResult CreateNewCategory(CategoryEditViewModel categoryEditViewModel)
{
    if (ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }
    return View("CategoryEditDialog", categoryEditViewModel);
}

And finally my partial view :

@model Rovastamp.MVC3.ViewModels.AdminController.CategoryEditViewModel
<h2>Upravit kategorii @Model.Category.Name</h2>
@{Html.EnableClientValidation();}
@using (Html.BeginForm("CreateNewCategory", "Admin"))
{ 
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Objednávkový formulář</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Category.Name) 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Category.Name) 
            @Html.ValidationMessageFor(model => model.Category.Name) 
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Category.Position) 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Category.Position) 
            @Html.ValidationMessageFor(model => model.Category.Position) 
        </div>

        <input  type="submit" value="Upravit" class="submit_button" />               
    </fieldset>
}

In my web.config I turned on UnobtrusiveJavaScript and ClientValidatin app settings.

If I clik on submit button on jquery ui dialog, mvc does full refresh without client validation?

Where is the problem?

Thanks for any help

EDIT :

In my Layout page i include this scripts :

• jquery.unobtrusive-ajax.js
• jquery.validate.js
• jquery.validate.unobtrusive.js

EDIT 2

In my exemaple i put :

jQuery.validator.unobtrusive.parse('#popup_dialog');

before i call jquery ui dialog and client validation works perfectly.

Answer 1

It is because you are loading a PartialView into a View that has already been parsed by the jquery.validator.unobstrusive library. You need to instruct the library to re-parse the page to take into account your injected PartialView validation attributes. Read this blog post of mine on the subject it will hopefully answer your question.

Answer 2

In addition to wiring up your submit button like so

    $("#SubmitButton").click(function(){
    if (!$("#editForm").valid()){
        return false;
    }
      });

You need to specific the html form to parse, it didn't work for me using the default constructor.

$.validator.unobtrusive.parse("#editForm");   

I am trying to figure out a way so that you do not have to wire up each submit button on each form, will post here if I find a way.

Answer 3

I struggled hard with this issue, After several hours I concluded that jQuery render the DIALOG HTML element, outside the form element. Since jQuery.Validation plugin works only within the FORM element, It is necessary to return back the Dialog inside the Form scope, this can be done by the following open event handling:

  $('#dialogDivId').dialog({
      autoOpen: false,
      width: 500,
      height: 500,
      minheight: options.minheight,
      minwidth: options.minwidth,
      modal:false,
      open: function (type, data) {
             $(this).appendTo($('form')); // reinsert the dialog to the form
      }   // And Solve your validation inside Jquery dialog
});