How to add custom error message with “required” htmlattribute to mvc 5 razor view text input editor

asp.net, asp.net-mvc, c#, razor

Solution

I find out a way to override this default required message on Client Side by using htmlAttribute title property and below is the code :

<div class="form-group">
        @Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { @class = "form-control", required = "required", title = "LabourCost is requried"} })
            @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { @class = "text-danger" })
        </div>
    </div>

Problem

I am naive to Asp.Net MVC. I have a partial view(ASP.Net MVC) in which I have some required fields I want to show custom error message if any of the required field in not provided. Below is the complete cshtml code for my partial view. ``` @model CMSAdminPanel.ViewModel.ProductView <h4>Material And Labour Cost For Each Size</h4> <hr /> @Html.ValidationSummary(false, "", new { @class = "text-danger" }) @for (int i = 0; i < Model.ServiceView.ListPriceView.Count; i++) { @Html.HiddenFor(x => x.ServiceView.ListPriceView[i].ProductSizeType) <div class="form-group"> @Html.LabelFor(x => x.ServiceView.ListPriceView[i].ProductSizeTypeName, "Size - " + Model.ServiceView.ListPriceView[i].ProductSizeTypeName, htmlAttributes: new { @class = "control-label col-md-4" }) </div> <div class="form-group"> @Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { @class = "form-control", required = "required"} }) @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(x => x.ServiceView.ListPriceView[i].MaterialCost, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(x => x.ServiceView.ListPriceView[i].MaterialCost, new { htmlAttributes = new { @class = "form-control", required = "required" } }) @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].MaterialCost, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(x => x.ServiceView.ListPriceView[i].Profit, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(x => x.ServiceView.ListPriceView[i].Profit, new { htmlAttributes = new { @class = "form-control", required = "required" } }) @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].Profit, "", new { @class = "text-danger"}) </div> </div> } ``` I want to show custom message "Material cost is required" while I am getting "This field is required". So I want to override this difault error message on client side. I want to achieve something like this: ``` <div class="form-group"> @Html.LabelFor(x => x.ServiceView.ListPriceView[i].LabourCost, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { @class = "form-control", required = "required", **data_val_required = "LabourCost is requried"**} }) @Html.ValidationMessageFor(x => x.ServiceView.ListPriceView[i].LabourCost,"", new { @class = "text-danger" }) </div> </div> ``` Any suggestion/solution would be great help

Original source

Related problems