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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In your model class, add change the [Required] attribute to

[Required(ErrorMessage = "Material cost is required")]
public decimal MaterialCost {get;set;}

Another approach is to set it from JavaScript using JQuery or override the attribute that sets it. by default the output of the ValidationMessageFor is

data-val-required="The field is required.".

SO, you can override this value in your markup

Method 2

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>

Method 3

in your model

[Required(ErrorMessage = "Material cost is required")]
public doubleMaterialCost { get; set; }

and you can choose to load it from Resources and pass resource string if you have multiple cultures in your site.

or in your Action

public ActionResult(YourModel model)
{
    if (model.doubleMaterialCost == 0)
            ModelState.AddModelError("doubleMaterialCost ", "Material cost is required");

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0