How to use HTML5 native validation rules for text input fields in ASP.NET-MVC 5.2?

Question

In HTML5 we can create input fields with custom validation error statements. For instance:

<input type="text" name="username"
       id="username" pattern="[a-zA-Z ]{5,}"
       maxlength="30" required />
<div class="validation-messages"> 
     <span data-rule="valueMissing" //FIRST RULE
     class="hide">The username is required. </span>
     <span data-rule="patternMismatch" //SECOND RULE
     class="hide">ust be a series of alpha characters only (min 5, max 30).          
    </span> 
</div>

If user breaks any data rule he gets notification which depends on the broken rule and I look for a way to use them in ASP.NET-MVC.

All HTML5 native errors are:valueMissing, typeMismatch, patternMismatch, tooLong, rangeUnderflow, stepMismatch, value.

In ASP.NET-MVC the Html.EditorFor() method is vastly used. For instance:

<div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

It generates input fields.

Where and how should I define those native validation errors prompts(for instance patternMismatch seen above)? Should I do it in the EditorFor method or there is a way to define them in the model class?

I don't think there is a dynamic way that can generate html validations depending on validations you have set in your model. But I guess templates is one thing you can check .. growingwiththeweb.com/2012/12/… .. might be helpful — A Khudairy
– A Khudairy, Commented Mar 10, 2015 at 15:23

JEV · Accepted Answer · 2015-03-10 15:06:57Z

1

If you want to validate an input against its type, use EditorFor in the view as you have but then in your model decorate the fields with the DataType attribute like so:

public class ModelTest 
{
    [DataType(DataType.EmailAddress)]
    public string Email {get;set;}
}

You can then go a step futher and use additional parameters to specify various elements of error detailing such as an error message.

[DataType(DataType.EmailAddress,ErrorMessage = "Email is required")]

If you need it to be required use the following attribute

[Required]

If you need to check string length you can use the following attributes as necessary

[StringLength()]
[MinLength()]
[MaxLength()]

For number based validation perhaps try

[Range()]

More often then not, when you are unsure or want to see if some validation exists, just use the Intellisense to browse through possible DataAnnotations

Additional Reading

http://www.asp.net/mvc/overview/older-versions/mvc-music-store/mvc-music-store-part-6

https://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx

edited Mar 10, 2015 at 15:06

answered Mar 10, 2015 at 14:56

JEV

2,5224 gold badges36 silver badges47 bronze badges

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

6 Comments

Yoda Over a year ago

This is one error message. The HTML5 have these native error messages: valueMissing, typeMismatch, patternMismatch, tooLong, rangeUnderflow, stepMismatch, value.

Yoda Over a year ago

Thanks. I already know these. The first example in the OP shows custom notification which depends on the broken rule and I look for a way to use them in ASP.NET-MVC.

JEV Over a year ago

I don't understand what you can't achieve using the attributes I have posted or any of the other dataannotations?

A Khudairy Over a year ago

@Glitch100, mvc renders validations using jquery unobtrusive not html5

JEV Over a year ago

I know but when it is rendered to the page it is done by placing restrictions on the model. Conveniently this is then also used for server side

|

Collectives™ on Stack Overflow

How to use HTML5 native validation rules for text input fields in ASP.NET-MVC 5.2?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related