Is jquery.validate.unobtrusive Bugged?

Question

I am trying to get my clienside validation to work when using an ajax request in a jquery ui dialog.

This means I have no submit button and I do no post back. I could not figure out why I could not get it to work.

I posted this question . I been playing around with it can come to the conclusion is that for whatever reason I need to load up the jquery.validate.unobtrusive with my partial view. It makes no sense to me.

Is this a bug?

Edit

I also gone and posted the error on the asp.net codeplex

The added benefit to this is that if you wish you can just download my little sample application and try it out.

Or you can Follow these steps

Make an non empty asp.net mvc 3 application( I am using razor)

_Layout.cshtml

@ViewBag.Title

            <script type="text/javascript">
                $(function ()
                {
                    $.get('/home/dialog', null, function (r)
                    {

                        var a = $("#dialog").dialog({
                            resizable: false,
                            height: 500,
                            modal: true,
                            buttons: {
                                  "Delete all items": function ()
                                {
                                    $('#testFrm').validate().form();
                                },
                                Cancel: function ()
                                {
                                    $(this).dialog("close");
                                }
                            }
                        }).html(r);
                    });

                    $('#testFrm').live('submit',function (e)
                    {
                        e.preventDefault();
                    });

                });


            </script>
        </head>

        <body>
            <div class="page">

                <div id="header">
                    <div id="title">
                        <h1>My MVC Application</h1>
                    </div>

                    <div id="logindisplay">
                        @Html.Partial("_LogOnPartial")
                    </div>

                    <div id="menucontainer">

                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                        </ul>

                    </div>
                </div>

                <div id="main">
                    @RenderBody()
                    <div id="footer">
                    </div>
                </div>
            </div>
        </body>
        </html>

ViewUserControl1 (Partial View) - Stick in Home View folder

@model MvcApplication1.Models.TestModel

@using (Html.BeginForm("test","Account",FormMethod.Post,new {@id="testFrm"})) { @Html.ValidationSummary() @Html.TextBoxFor(x => x.Name) }

Index (should exist replace with this)

@model MvcApplication1.Models.TestModel


@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

@DateTime.Now

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

note the dialog id this will be where the ajax request of the partial view gets stored

Home Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult test()
        {
            return null;
        }

        public PartialViewResult Dialog()
        {
            return PartialView("ViewUserControl1");
        }


        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }




        public ActionResult About()
        {
            return View();
        }
    }
}

TestModel.cs // view model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace MvcApplication1.Models
{
    public class TestModel
    {
        [Required()]
        public string Name { get; set; }
    }
}

web.config

 <appSettings>
    <add key="webpages:Enabled" value="false" />
      <add key="ClientValidationEnabled" value="true" />
      <add key="UnobtrusiveJavaScriptEnabled" value="true" />  
  </appSettings>

Now run the application. Click "Delete all items" and "Submit Query".

Nothing should happen. No validation pops up for me.

Now go and add this line to the Partial View(ViewUserControl1)

<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>


@model MvcApplication1.Models.TestModel

@using (Html.BeginForm("test","Account",FormMethod.Post,new {@id="testFrm"}))
{
     @Html.ValidationSummary()
     @Html.TextBoxFor(x => x.Name)
     <input type="submit" />
}

Now try again.

It should now come up with validation errors.

chobo2 chobo2 · Accepted Answer · 2011-02-28T22:15:57

I think I found some sort of a work around. Even though I think a automatic way should be done for something so basic as making the validation work with partial views

Work around

Is jquery.validate.unobtrusive Bugged?

2 Answers