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

did you try to use the data annotation on the MaterialCost in your model? add the Required attribute from data annotations and pass the message in the error message parameter — Noor Samara, Jan 05 '17 at 13:08
@NoorSamara Yes, firstly I was trying data annotation on my model for required attribute and as well as for message also but for partial view model annotation is not working. So i try htmAttribute "required" and it's working fine however it show error message "this field is required". — Aashish Kumar, Jan 05 '17 at 13:11
I did a test myself and the custom Required message works fine, using this property: `public decimal MaterialCost {..}{..}`, both when triggered from a View *and* from a Partial View. This was with MVC v5.2.3. Are you using that too, or perhaps an older version? — Peter B, Jan 05 '17 at 13:54
@PeterB Yes its working fine for both the cases but I want to do client side validation not using "ModelState.IsValid" and required attribute in model. — Aashish Kumar, Jan 06 '17 at 06:15
Please check the below link: https://stackoverflow.com/questions/53042131/how-to-override-default-required-error-message/58543227#58543227 — VCody, Oct 24 '19 at 14:11

score 51 · Answer 1 · answered Jan 05 '17 at 13:29

51

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

answered Jan 05 '17 at 13:29

Haitham Shaddad

4,336
2
14
19

could you please tell me how can we override default output of ValidationMessageFor to "Material cost is required". Thanks in advance. – Aashish Kumar Jan 05 '17 at 13:45
You can override that in your model class which is used in the view, just put the line i put in my answer. – Haitham Shaddad Jan 05 '17 at 19:00
This is a partial view so I just want to do client side validation not "ModelState.IsValid" in my Controller. – Aashish Kumar Jan 06 '17 at 05:50
2

The Html Helper creates a client side validation as well as the server side one – Haitham Shaddad Jan 06 '17 at 10:25
Is there any other way if i don't want to use required attribute in my model? – Aashish Kumar Jan 09 '17 at 07:11
1

Then use the other way I explained in my answer by putting `the data-val-required="The field is required.".` – Haitham Shaddad Jan 09 '17 at 10:53
I tried this @Html.EditorFor(x => x.ServiceView.ListPriceView[i].LabourCost, new { htmlAttributes = new { @class = "form-control",data_valmsg_replace=true,data_val_required = "Labour Cost Field required", required = "required" } }) but still I am getting "This field is required". :( – Aashish Kumar Jan 09 '17 at 10:57

score 15 · Accepted Answer · answered Feb 03 '17 at 08:12

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>

somehow this only works on textinputs for me, if I have an `EditorFor` `type="date"` or `type="number"` it gives it's default error message — FllnAngl, Jun 12 '18 at 08:00

Ahmed · Answer 3 · 2017-01-05T13:19:35.940

2

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

edited Jan 05 '17 at 13:19

answered Jan 05 '17 at 13:12

Ahmed

1,542
2
13
21

I used this annotation in my model already but in case of partial view this in not working. – Aashish Kumar Jan 05 '17 at 13:13
@AashishKumar Can you share your controller action. – Ahmed Jan 05 '17 at 13:15
@AashishKumar Also I edit my answer with another way of validation, you can also try this way. – Ahmed Jan 05 '17 at 13:20
Actually I want to do something at client side not on controller level. Is it possible? – Aashish Kumar Jan 06 '17 at 04:44

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

3 Answers3

Linked