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.

davidferguson · Accepted Answer · 2013-04-09 14:47:46Z

29

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.

edited Apr 9, 2013 at 14:47

answered Feb 6, 2011 at 13:10

davidferguson

7605 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gnome Over a year ago

+1 Wish I could boost you more david. Exactly what I've been needing.

Omu Over a year ago

@gnome :) you can open his profile and upvote all his answers and questions, everything is possible

Hans Olsson Over a year ago

@Omu: Though that would mean that all the votes would probably be deemed invalid as the votes would probably be seen as vote fraud. So I wouldn't recommend it.

James McCormack Over a year ago

This didn't work for me until I specified the precise form than needed parsing, as Jonathan's answer points out. i.e. $.validator.unobtrusive.parse("#editForm");

Jonathan · Accepted Answer · 2012-06-29 13:33:52Z

3

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.

answered Jun 29, 2012 at 13:33

Jonathan

7211 gold badge9 silver badges14 bronze badges

Comments

Peter O. · Accepted Answer · 2012-10-27 22:00:58Z

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
});

This is the correct problem, but it interferes with the dialog UI. I solved it with: open: function (type, data) { $(this).wrap("<form />"); }

Jonathan Leffler · Accepted Answer · 2011-11-29 04:59:45Z

0

Are you including the proper JavaScript files for the client side validation?

Check the JavaScript console when you execute the submit action, I bet there's an error there that's causing the JavaScript to error out and then the form's default submit action is kicking in.

edited Nov 29, 2011 at 4:59

Jonathan Leffler

759k145 gold badges961 silver badges1.3k bronze badges

answered Feb 6, 2011 at 1:20

TheRightChoyce

3,0941 gold badge25 silver badges20 bronze badges

1 Comment

TheRightChoyce Over a year ago

You might need MicrosoftAjax.js and MicrosoftMvcAjax.js ? i'm not sure, though. I haven't had a chance to use the unobtrusive jquery logic yet.

Collectives™ on Stack Overflow

asp.net mvc3 jquery ui dialog and client validation

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Related