Using xVal and a ViewModel

Question

I saw a similar post that was trying to do this same thing with the Dinner example, but he fixed his issue mine seems to be a little deeper. Basically I cxan get the validation to work just fine but it only works in Firefox. In IE7 when the page loads, I immediately get an alert box with the following message: "Error: Element title is not in a form"... Clearly it is in form here, If needed i can post the markup that is actually rendered from view source to show this. Any ideas on what I can do to fix this would be most appreciated!

Basically I am just trying to make sure my NewsPost has a title and a body. Since I have it wrapped up in the ViewModel I'm thinking IE doesnt quite understand this. Maybe I am wrong.

I am using xVal for my validation. I am passing a ViewModel in as my Model. My ViewModel looks like this:

public class NewsAdminViewData : ViewModel
{
   public NewsPost NewsPost { get; set; }
   public List<SelectListItem> NewsItem { get; set; }
   public List<SelectListItem> NewsGroup { get; set; }

   public NewsAdminViewData(List<SelectListItem> newsItem, List<SelectListItem> newsGroup, NewsPost newsPost)
   {
      this.NewsItem = newsItem;
      this.NewsGroup = newsGroup;
      this.NewsPost = newsPost;
   }
}

Here is my View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MVCApp.Models.ViewModels.News.NewsAdminViewData>" %>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <% using (Html.BeginForm())
           {%>
        <div class="moduleContainer">
            <div class="moduleTitle">
                Create News Item
            </div>
            <div class="moduleContent">
                <div>
                    <div>
                        Title:</div>
                    <div>
                        <%= Html.TextBox("Title") %>
                    </div>
                </div>
                <div>
                    <div>
                        &nbsp;</div>
                    <div>
                        <%= Html.TextArea("Body") %>
                    </div>
                </div>
                <div>
                    <div>
                        News Group:
                    </div>
                    <div>
                        <%= Html.DropDownList("NewsGroup")%>
                    </div>
                </div>
                <div>
                    <div>
                        News Item:
                    </div>
                    <div>
                        <%= Html.DropDownList("NewsItem") %>
                    </div>
                </div>
            </div>
            <div class="moduleFooter">
                <%= Html.SubmitButton("btnSubmit", "Add News Post", null, "To add this news post click here.", "#ffd40f")%>
            </div>
        </div>
        <% } %>
        <%= Html.ClientSideValidation<NewsPost>()%>

And finally my post action:

 [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult Create(/*FormCollection collection*/ NewsPost np)
    {
       NewsPost entity = this.reposNewsPost.New();
       try
       {
          entity.Title = np.Title; 
          entity.NewsPostGUID = System.Guid.NewGuid();
          entity.DateAdded = DateTime.Now;
          entity.DateUpdated = DateTime.Now;
          entity.Body = np.Body; 

          UpdateModel(entity);
          this.reposNewsPost.Insert(entity);
          this.reposNewsPost.SubmitChanges();
          return RedirectToAction("Index");
        }
        catch (RulesException ex)
        {
           ex.AddModelStateErrors(ModelState, "NewsPost");
           return ModelState.IsValid ? RedirectToAction(MVC.News.Actions.Create) 
                        : (ActionResult)View();
        }
     }

Answer 1

Hey gmcalab,

I ran into the similar problem as you have. Honestly, it does not look like you made the mess as I have, but maybe it will direct you to the solution.

Mine input form with xVal client validation was loaded dynamically (jquery ajax call) into the page. Unfortunately, I overlooked that I was placing the returned html into the element that already has 'form' between parents elements. Because it was an ajax request, nested 'form' elements where present on the page, and xVal method "_attachRuleToDOMElement" is implemented this way:

 var parentForm = element.parents("form");
        if (parentForm.length != 1)// <-- there can be only one parent form of course
            alert("Error: Element " + element.attr("id") + " is not in a form");

Mine parentForm.lengts was 2!

I see that you don't have nested form here for sure, but maybe in master page there is something? Could be that IE7 renders nested forms and Firefox does not. Also, I would name the input controls differently, although this should not be the source of the problem:

<%= Html.TextBox("np.Title") %>...<%= Html.TextBox("np.Body") %> etc...

and then I would set elementPrefix too:

<%= Html.ClientSideValidation<NewsPost>("np")%>