asp.net-mvcasp.net-ajax

EnableClientValidation causes fields to disappear


I have an MVC app with a Partial View (below). When I add Html.EnableClientValidation(), my fields disappear upon exiting them. I don't expect anyone to figure it out from the code, but if anyone has seen such behavior and can point me in the right direction, I'd appreciate it. In the mean time, I'll start rebuilding piece by piece and see what I can see and will report back.

Thanks!

<%= Html.ValidationSummary() %>
<% Html.EnableClientValidation(); // IMPORTANT: this line MUST be *before* Html.BeginForm() block %>
<% using (Ajax.BeginForm("Save", "Items", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "ItemPane"})){%>
<%=Html.AntiForgeryToken()%>
<%=Html.Hidden("Item.Id", (ViewData.Model.Item != null) ? ViewData.Model.Item.Id : Guid.Empty)%>
 <!--more hidden items elided-->
   <table> <!--yes, I know it should be divs-->
       <tr>
           <td rowspan="2" width="400px">
            <div class="formarea">
            <fieldset>
                <ol>
                    <li>
                        <label id="Item_Label"><%= (ViewData.Model != null && ViewData.Model.Item != null) ? String.Format("Item Number {0} v. {1}",  ViewData.Model.Item.ItemNumber, ViewData.Model.Item.Iteration) : "New Item" %></label>
                    </li>
                    <li>
                        <label for="Item_Prompt" class="formLabel">Directions:</label>
                        <%=Html.TextAreaFor(t => t.Item.Directions, 3, 50, new { @class = "text2000", @maxlength = "2000" })%>
                        <%= Html.ValidationMessageFor(t => t.Item.Directions, "*")%>
                    </li>
                    <li>
                        <label for="Item_Prompt" class="formLabel">Prompt:</label>
                        <%= Html.TextBoxFor(model => model.Item.Prompt, new { @class = "text200", @maxlength = "200" })%>
                        <%= Html.ValidationMessageFor(model => model.Item.Prompt, "*")%>

                    </li>

I have the following script references:

<%= Html.Script("~/Scripts/MicrosoftAjax.debug.js") %>
<%= Html.Script("~/Scripts/MicrosoftMvcAjax.debug.js") %>
<%= Html.Script("~/Scripts/jquery-1.4.2.min.js") %>
<%= Html.Script("~/Scripts/jquery-ui-1.8.2.custom.min.js") %>
<%= Html.Script("~/Scripts/jquery.form.js") %>
<%= Html.Script("~/Scripts/MicrosoftMvcValidation.js") %>

Solution

  • Figured it out - it was this css from a previous dalliance with this code:

    /---------------------------------------------------------- ASP.NET MVC FRAMEWORK DEFAULT CSS CLASS NAMES ----------------------------------------------------------/ .error,.field-validation-error{color:red}

    .input-validation-valid,.field-validation-valid,.validation-summary-valid{display:none} .input-validation-error{background-color:#fee;border:1px solid red; outline: none} .input-validation-error:focus{outline:none} input[type="text"].input-validation-error:focus, select.input-validation-error:focus{outline:none}

    .validation-summary-errors{color:red} .validation-summary-errors span{font-weight:700} .validation-summary-errors ul{list-style:disc inside} .validation-summary-errors ul li{font-weight:normal} .validation-summary-errors ul li label, .validation-summary-errors ul li span{display:inline !important; font-weight:normal}