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

Question

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

Answer 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

Answer 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>

Answer 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");