Home/ Questions/Q 6387999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T03:13:27+00:00

I am having an issue where form errors are persisting on the page even

  • 0

I am having an issue where form errors are persisting on the page even after the form is valid.

I have the following setup:

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

index.cshtml:

@model SimpleForm.Models.Name
@{
    ViewBag.Title = "Form";
}

<script>
    $().ready(function () {
        $("#quote_form").submit(function () {

            return true;
        });
    });
</script>
@using (Ajax.BeginForm("RunQuote", "Page", new AjaxOptions { UpdateTargetId = "quoteSummary" }, new { id = "quote_form", onreset = "return confirm('Clear all form data?')" }))
{    
    <input type="submit" value="Send" /> 
    <fieldset>
        <legend>Name </legend>
        <dl>
            <dt>First</dt>
            <dd>@Html.TextAreaFor(m => m.first, new { onblur = "$('#quote_form').submit();" })</dd>
            <dt>Last</dt>
            <dd>@Html.TextAreaFor(m => m.last, new { onblur = "$('#quote_form').submit();" })</dd>
        </dl>
    </fieldset>

    <div class="qMatrixSubText">
        @Html.ValidationSummary()
        @{
    Html.ValidateFor(m => m.first);
    Html.ValidateFor(m => m.last);
        }
    </div>                                       
    <div id="quoteSummary" class="quoteSummary">
    </div>                                       
}

FormController.cs

using System;
using System.Web.Mvc;
using SimpleForm.Models;

namespace SimpleForm.Controllers
{
    public class FormController : Controller
    {
        //
        // GET: /Form/

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

        public String RunQuote(Name quote)
        {
            return "Success!";
        }
    }
}

Name.cs

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

namespace SimpleForm.Models
{
    public class Name
    {
        [Required()]
        public string first { get; set; }
        public string last { get; set; }
    }
}

The form populates fine, I see the error if I don’t put anything into first and the form won’t submit. After populating something into first I get the ajax call and then it posts “Success” to the div.

However, this is the problem, the error “the first field is required.” still remains on the page. It’s as if the ajax submit form is going through before the validation gets a chance to clear the error, and then it never gets the chance.

Any way to get the validation to still remove the errors?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The form is not being validated, because your onblur event is short-circuiting the submission process in jquery-unobtrusive-ajax.js.

    Instead, change your onblur event for both fields to the following:

    $(this).parents('form:first').find(':submit')[0].click();

    This will invoke the jquery.unobtrusive-ajax.js script, causing validation to occur prior to the Ajax submission to the server.

    UPDATE

    When I looked back at your view, I saw that you are calling @Html.ValidateFor() for your properties. This creates HTML markup outside of the div created by @Html.ValidationSummary.

    Because this markup is outside of where unobtrusive validation expects it, this markup is never overwritten, and will always remain. Remove the @Html.ValidateFor() lines. If you need to have the validation messages after your initial load, call validate() on document.ready to set your validation messages.

    • 0