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
– Noor Samara, Commented Jan 5, 2017 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
– Aashish Kumar, Commented Jan 5, 2017 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
– Peter B, Commented Jan 5, 2017 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
– Aashish Kumar, Commented Jan 6, 2017 at 6:15
Please check the below link: stackoverflow.com/questions/53042131/… — VCody
– VCody, Commented Oct 24, 2019 at 14:11

Haitham Shaddad · Accepted Answer · 2017-01-05 13:29:39Z

57

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 5, 2017 at 13:29

Haitham Shaddad

4,4662 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Aashish Kumar Over a year ago

could you please tell me how can we override default output of ValidationMessageFor to "Material cost is required". Thanks in advance.

Haitham Shaddad Over a year ago

You can override that in your model class which is used in the view, just put the line i put in my answer.

Aashish Kumar Over a year ago

This is a partial view so I just want to do client side validation not "ModelState.IsValid" in my Controller.

Haitham Shaddad Over a year ago

The Html Helper creates a client side validation as well as the server side one

Haitham Shaddad Over a year ago

Then use the other way I explained in my answer by putting the data-val-required="The field is required.".

|

Aashish Kumar · Accepted Answer · 2017-02-03 08:12:53Z

15

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>

answered Feb 3, 2017 at 8:12

Aashish Kumar

1,6431 gold badge17 silver badges19 bronze badges

1 Comment

FllnAngl Over a year ago

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

Ahmed · Accepted Answer · 2017-01-05 13:19:35Z

5

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 5, 2017 at 13:19

answered Jan 5, 2017 at 13:12

Ahmed

1,6002 gold badges15 silver badges21 bronze badges

4 Comments

Aashish Kumar Over a year ago

I used this annotation in my model already but in case of partial view this in not working.

Ahmed Over a year ago

@AashishKumar Can you share your controller action.

Ahmed Over a year ago

@AashishKumar Also I edit my answer with another way of validation, you can also try this way.

Aashish Kumar Over a year ago

Actually I want to do something at client side not on controller level. Is it possible?

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related