How to display error validation summary Header in ASP.Net MVC 5

Question

I am a beginner in ASP.Net MVC 5 and I want to know how to display validation summary "Header Message" on top of page above all the errors.

Below is what I have till now:

View:

@model WebApplication3.Models.Form
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Form</h4>
        @* first parameter false means show all the errors *@
        @* second parameter means the message to display as Header on top*@
        @Html.ValidationSummary(false,"Fix below error", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "*", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.age, new { htmlAttributes = new { @class = "form-control" } })
                @*star meaning show the star sign to keep show field required.  *@
                @Html.ValidationMessageFor(model => model.age, "*", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@* CLIENT SIDE VALIDATION*@
@section Scripts
 {
 @Scripts.Render("~/bundles/jqueryval")
 }

Model

 public class Form
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        [Remote("IsAgeUnique", "Form", ErrorMessage = "Age is not unique")]
        public int age { get; set; }
    }

P.S: I have used @Html.ValidationMessageFor(prop, "*") wildcard for each property to display star message side to the UI field.

Issue: When the page loads the error header is already there displayed on the page. Functionality wise everything is working fine. But during initial page load why the "Header message gets displayed"

hasan · Accepted Answer · 2017-08-03T19:39:21.707

2

You can try to add css rule like following to make header error part unvisible initially.

Validation summary text has validation-summary-valid class initially. If there are some errors it becomes validation-summary-errors so your initial value dont have any error, I think you can use css rule

.validation-summary-valid {
    display:none;
}

edited Aug 03 '17 at 19:39

answered Aug 03 '17 at 19:22

hasan

3,484
1
16
23

But why I am facing issue. I dont understand. Its a basic form and I should not have faced any issue. What's the actual cause. :-| – Unbreakable Aug 03 '17 at 19:24
validation summary text has validation-summary-valid class initially if there are some errors it becomes validation-summary-errors so your initial value dont have any error, I think you can use css rule – hasan Aug 03 '17 at 19:26
@Unbreakable you can check these two question https://stackoverflow.com/questions/21296281/mvc-razor-validation-errors-showing-on-page-load-when-no-data-has-been-posted https://stackoverflow.com/questions/4166997/html-validationsummaryfalse-message-is-always-showing-even-on-page-load – hasan Aug 03 '17 at 19:33
@Unbreakable your welcome:). Please consider to accept the answer to help people understand problem has been solved. – hasan Aug 03 '17 at 19:40

How to display error validation summary Header in ASP.Net MVC 5

1 Answers1