MVC Html.EnableClientValidation tutorial with examples

Using Html.EnableClientValidation for Form Validation in ASP.NET MVC with example. ASP.NET MVC provides a simple and effective way to validate user input in a form through the use of Model validation and client-side validation. In this post, we'll take a closer look at how to enable client-side validation in ASP.NET MVC using the @Html.EnableClientValidation method.

Client-side validation provides a fast and responsive user experience by validating the form data on the client's side before it is submitted to the server. This helps to reduce the number of round trips to the server, improving the overall performance of your application.

To enable client-side validation in ASP.NET MVC, we need to first enable it in our view. This is achieved by using the @Html.EnableClientValidation method in the form that we want to validate. The code for enabling client-side validation in a form would look like this:

@model MVC_Testing.Controllers.Person
@{Html.EnableClientValidation(true);}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    

        Name:
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.Name, "", new { @class = "text-danger" })
    
    

        Age:
        @Html.TextBoxFor(x => x.Age, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.Age, "", new { @class = "text-danger" })
    
    

        
    
}

Next, we need to define the validation rules in our Model. For example, if we have a Model called Person with the properties Name and Age, we can define the validation rules as follows:

public class Person
{
    [Required(ErrorMessage = "Please enter your name")]
    [Display(Name = "Name")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Please enter your age")]
    [Display(Name = "Age")]
    [Range(18, 100, ErrorMessage = "Age must be between 18 and 100")]
    public int Age { get; set; }
}

The [Required] attribute indicates that the property is required and cannot be null, while the [Range] attribute specifies the range of values that the property can take. The ErrorMessage property of each attribute is used to display a custom error message when the validation fails.

Finally, we need to make sure that the required scripts for client-side validation are included in our view. The scripts can be included using the following code:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

That's it! With these simple steps, we have enabled client-side validation in our ASP.NET MVC form. The validation rules defined in the Model are automatically applied to the form, and any errors are displayed to the user in real-time, providing a fast and user-friendly experience.

In conclusion, client-side validation is an essential part of building modern web applications. With the @Html.EnableClientValidation method, enabling client-side validation in ASP.NET MVC is a straightforward and simple process, helping you to create a better user experience for your users.

For complete information about Html.EnableClientValidation method you can check this: HtmlHelper.EnableClientValidation Method

Html.EnableClientValidation Output