Jquery dialog client side validation on “Required!!” fields with asp.net mvc2

Question

I've loaded a form dynamically into a jquery ui dialog. Now I want to add client side validation to this dialog. I've tried Scott Gu's Blog and that works all well and good but doesn't affect the dialog (no error message of "Title required" when I use form in the dialog) to when I just use the normal Url. I have tried jquery.validate with rules and messages similar to the answer to question Mvc2 Client Side Validation on within Jquery modal dialog? and that still doesn't show anything different in dialog and when I click the submit button it still says Successful. (I'm certain I'm on the right lines with this)

I can manipulate the helper classes to prevent greater maximum length entry but its minimum length and required data fields that I'm struggling with. I've tried using all javascripts I could think of like MvcJQueryValidation but still nothing.

Please help anyone thank you

Answer 1

Here's an example of how you can proceed. As always start with a view model that will represent the form data inside the partial:

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
    public string Bar { get; set; }
}

Then a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Dialog()
    {
        return PartialView(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Dialog(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        // TODO: the model is valid => process ...
        return Json(new { success = "thanks for submitting" });
    }
}

and finally the views.

~/Views/Home/Index.aspx :

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-1.4.1.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/jquery-ui-1.8.11.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/scripts/MicrosoftMvcValidation.js") %>"></script>
<script type="text/javascript">
    $(function () {
        $('#show').click(function () {
            $('#dialog').load(this.href, function (result) {
                Sys.Mvc.FormContext._Application_Load();
                $('#myForm').submit(function () {
                    if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
                        $.post(this.action, $(this).serialize(), function (data) {
                            if (data.success) {
                                alert(data.success);
                                $('#dialog').dialog('close');
                            } else {
                                $('#dialog').html(data);
                            }
                        });
                    }
                    return false;
                });
            }).dialog({ autoOpen: true });
            return false;
        });
    });
</script>

<%= Html.ActionLink("Show jquery dialog", "Dialog", null, new { id = "show" })%>

<div id="dialog"></div>

</asp:Content>

and finally the partial ( ~/Views/Home/Dialog.ascx ):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" %>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %>
    <div>
        <%= Html.EditorFor(x => x.Foo)%>
        <%= Html.ValidationMessageFor(x => x.Foo) %>
    </div>
    <div>
        <%= Html.EditorFor(x => x.Bar)%>
        <%= Html.ValidationMessageFor(x => x.Bar) %>
    </div>
    <input type="submit" value="OK" />
<% } %>

The important part happens once the dialog is loaded an the form is injected into the DOM => you need to reparse the validation rules using the Sys.Mvc.FormContext.getValidationForForm method.