# Validation

Telerik UI for ASP.NET MVC enables you to use client-side validation by utilizing the <a href="https://docs.telerik.com/kendo-ui/controls/validator/overview" target="_blank">Kendo UI for jQuery Validator</a> or the default <a href="https://www.nuget.org/packages/jQuery.Validation" target="_blank">jQuery validation</a>.

This article covers the implementation of validation using <a href="https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-9.0" target="_blank">`DataAnnotation` attributes</a> to create validation rules based on unobtrusive HTML attributes and describes how to activate the Kendo UI Validator on the client. It also explains how to create custom validation rules, extend the built-in validation rules of the editable UI components, such as [Grid](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview) and [ListView](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/listview/overview), or use the jQuery validation when using Telerik UI for ASP.NET MVC components.

## Using DataAnnotation Attributes

The Telerik UI HTML Helpers consume the `DataAnnotation` attributes that are added to the Model. This way, the server-side validation is performed using the `ModelState`, which is updated based on these validation rules (for example, `ModelState.IsValid`).

The Telerik UI for ASP.NET MVC editors support the following `DataAnnotation` attributes:

* `DataTypeAttribute`
* `EmailAddress`
* `MaxLengthAttribute`
* `MinLengthAttribute`
* `Range`
* `RegularExpression`
* `Required`
* `StringLength`
* `UrlAttribute`
* `ReadOnly`

The `HTML5` <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*" target="_blank">`data-*` attributes</a> are generated in the HTML markup of each editor component based on the `DataAnnotation` attributes applied to the Model properties. To enable the client-side validation, the <a href="https://docs.telerik.com/kendo-ui/controls/validator/overview" target="_blank">Kendo UI for jQuery Validator</a> must be activated on the form that contains the editor components. The Validator automatically creates <a href="https://docs.telerik.com/kendo-ui/controls/validator/rules" target="_blank">validation rules</a> based on the unobtrusive HTML attributes. Also, the Validator creates rules for the unobtrusive attributes that are generated implicitly by ASP.NET MVC for numbers and dates.

> The `ReadOnly` attribute will not generate a `data-*` attribute or create an internal validator rule, but the respective DOM input element will contain a [`readonly` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly).

The following example demonstrates how to enable the Kendo UI Validator to perform client-side validation based on the applied `DataAnnotation` attributes.

1. Create a Model and set the desired `DataAnnotation` attributes.

   ```C#
       public class OrderViewModel
       {
           [HiddenInput(DisplayValue = false)]
           public int OrderID { get; set; }

           [Required]
           [Display(Name = "Customer")]
           public string CustomerID { get; set; }

           [Required]
           [StringLength(15)]
           [Display(Name = "Ship Country")]
           public string ShipCountry { get; set; }

           [Required]
           [Range(1, int.MaxValue, ErrorMessage = "Freight should be greater than 1")]
           [DataType(DataType.Currency)]
           public decimal? Freight { get; set; }

           [Required]
           [Display(Name = "Order Date")]
           public DateTime? OrderDate { get; set; }

           [ReadOnly(true)]
           public string ShipCountry { get; set; }
       }
   ```

2. Pass an instance of the Model to the View.

   ```C#
       public ActionResult Create()
       {
           return View(new OrderViewModel());
       }
   ```

3. Create the editors in the View based on the Model properties and initialize the Validator on the form with jQuery when the page with the form is loaded:

   ```Razor
   @model OrderViewModel

   @using (Html.BeginForm()) {
       <fieldset>
           <legend>Order</legend>

           @Html.HiddenFor(model => model.OrderID)

           <div class="editor-label">
               @Html.LabelFor(model => model.CustomerID)
           </div>
           <div class="editor-field">
               @(Html.Kendo().TextBoxFor(model => model.CustomerID))
               @Html.ValidationMessageFor(model => model.CustomerID)
           </div>
           <div class="editor-label">
               @Html.LabelFor(model => model.ShipCountry)
           </div>
           <div class="editor-field">
               @(Html.DropDownListFor(model => model.ShipCountry)
                   .BindTo(new List<string>() {
                       "Country A",
                       "Country B",
                       "Country C"
                   })
               )
               @Html.ValidationMessageFor(model => model.ShipCountry)
           </div>

           <div class="editor-label">
               @Html.LabelFor(model => model.Freight)
           </div>
           <div class="editor-field">
               @Html.Kendo().NumericTextBoxFor(model => model.Freight)
               @Html.ValidationMessageFor(model => model.Freight)
           </div>

           <div class="editor-label">
               @Html.LabelFor(model => model.OrderDate)
           </div>
           <div class="editor-field">
               @Html.Kendo().DatePickerFor(model => model.OrderDate)
               @Html.ValidationMessageFor(model => model.OrderDate)
           </div>

           <p>
               <input type="submit" value="Save" />
           </p>
       </fieldset>
   }

   <script>
       $(function () {
           $("form").kendoValidator(); // Select the form with jQuery.
       });
   </script>
   ```

For a live example, visit the [Basic Usage demo of the Validator](https://demos.telerik.com/aspnet-mvc/validator).

## Implementing Custom Attributes

To use <a href="https://learn.microsoft.com/en-us/previous-versions/aspnet/cc668224(v=vs.100)" target="_blank">custom `DataAnnotation` attributes</a>, <a href="https://docs.telerik.com/kendo-ui/controls/validator/rules#custom-rules" target="_blank">define the custom rules</a> when initializing the Validator.

For example, you can implement a `GreaterDateAttribute` attribute to check whether the selected `ShippedDate` value is greater than the selected `OrderDate`.

1. Create a `class` that inherits from the `ValidationAttribute` class and implements the `IClientValidatable` interface. Add the `IsValid` and `GetClientValidationRules` methods.

   ```C#
       [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
       public class GreaterDateAttribute : ValidationAttribute, IClientValidatable
       {
           public string EarlierDateField { get; set; }

           protected override ValidationResult IsValid(object value, ValidationContext validationContext)
           {
               DateTime? date = value != null ? (DateTime?)value : null;
               var earlierDateValue = validationContext.ObjectType.GetProperty(EarlierDateField)
                   .GetValue(validationContext.ObjectInstance, null);
               DateTime? earlierDate = earlierDateValue != null ? (DateTime?)earlierDateValue : null;

               if (date.HasValue && earlierDate.HasValue && date <= earlierDate)
               {
                   return new ValidationResult(ErrorMessage);
               }

               return ValidationResult.Success;
           }

           public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
           {
               var rule = new ModelClientValidationRule
               {
                   ErrorMessage = ErrorMessage,
                   ValidationType = "greaterdate"
               };

               rule.ValidationParameters["earlierdate"] = EarlierDateField;

               yield return rule;
           }
       }
   ```

2. Decorate the `ShippedDate` property with the newly implemented attribute.

   ```C#
       public class OrderViewModel
       {
           // Omitted for brevity.

           [Display(Name = "Order Date")]
           [DataType(DataType.Date)]
           public DateTime? OrderDate { get; set; }

           [GreaterDate(EarlierDateField = "OrderDate", ErrorMessage = "Shipped date should be after Order date")]
           [DataType(DataType.Date)]
           public DateTime? ShippedDate { get; set; }
       }
   ```

3. Implement the custom Validator rule to handle all inputs with the `data-val-greaterdate` attribute.

   ```Razor
       @model OrderViewModel

       @using (Html.BeginForm()) {
           <fieldset>
               <legend>Order</legend>

               @Html.HiddenFor(model => model.OrderID)

               <div class="editor-label">
                   @Html.LabelFor(model => model.OrderDate)
               </div>
               <div class="editor-field">
                   @Html.Kendo().DatePickerFor(model => model.OrderDate)
                   @Html.ValidationMessageFor(model => model.OrderDate)
               </div>

               <div class="editor-label">
                   @Html.LabelFor(model => model.ShippedDate)
               </div>
               <div class="editor-field">
                   @Html.Kendo().DatePickerFor(model => model.ShippedDate)
                   @Html.ValidationMessageFor(model => model.ShippedDate)
               </div>
               <p>
                   <input type="submit" value="Save" />
               </p>
           </fieldset>
       }

       <script>
           $(function () {
               $("form").kendoValidator({
                   rules: {
                       greaterdate: function (input) {
                           if (input.is("[data-val-greaterdate]") && input.val() != "") {
                               var date = kendo.parseDate(input.val()),
                                   earlierDate = kendo.parseDate($("[name='" + input.attr("data-val-greaterdate-earlierdate") + "']").val());
                               return !date || !earlierDate || earlierDate.getTime() < date.getTime();
                           }

                           return true;
                       }
                   },
                   messages: {
                       greaterdate: function (input) {
                           return input.attr("data-val-greaterdate");
                       }
                   }
               });
           });
       </script>
   ```

4. To trigger the custom serve-side validation employed from the attribute, use the `ModelState.IsValid` property.

   ```C#
       [HttpPost]
       public ActionResult Submit(OrderViewModel formData)
       {
           if (!ModelState.IsValid)
           {
               // Handle server-side error.
           }

           return View(model);
       }
   ```

## Applying Custom Attributes in Editable Helpers

The editable helpers, such as the Grid and ListView, initialize the Validator internally. To specify custom rules, you have to extend the built-in validation rules of the Validator. You can also use this approach to define rules and reuse them in all Views.

The following example shows how to implement a `CustomProductNameValidation` attribute to check whether the entered `ProductName` starts with a capital letter.

```C# Model
    using System.ComponentModel.DataAnnotations;
    using System.Text.RegularExpressions;

    public class CustomValidationProductViewModel
    {
        public int ProductID { get; set; }

        [Required]
        [CustomProductNameValidation(ErrorMessage="ProductName should start with capital letter")]
        public string ProductName { get; set; }
    }

    [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class CustomProductNameValidationAttribute : ValidationAttribute, IClientValidatable
    {
        public override bool IsValid(object value)
        {
            var productName = (string) value;
            if (!string.IsNullOrEmpty(productName))
	        {
		        return Regex.IsMatch(productName, "^[A-Z]");
            }
            return true;
        }

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            yield return new ModelClientValidationRule
            {
                ErrorMessage = ErrorMessage,
                ValidationType = "productnamevalidation"
            };
        }
    }
```

```Razor View
    @(Html.Kendo().Grid<ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.ProductID);
            columns.Bound(o => o.ProductName);
            columns.Command(command => command.Edit()).Width(200);
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
	    .Scrollable()
        .DataSource(source => source
            .Ajax()
            .Model(model => model.Id(o => o.ProductID))
            .Read("Read", "Products")
            .Update("Update", "Products")
        )
    )

    <script type="text/javascript">
        // Register custom validation rules after the Grid declaration.
        $(document).ready( function () {
            $.extend(true, kendo.ui.validator, {
                rules: {
                    productnamevalidation: function (input, params) {
                        if (input.is("[name='ProductName']") && input.val() != "") {
                            input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter");
                            return /^[A-Z]/.test(input.val());
                        }
                        return true;
                    }
                },
                messages: {
                    productnamevalidation: function (input) {
                        return input.attr("data-val-productnamevalidation");
                    }
                }
            });
        });
    </script>
```

For a live example, visit the [Custom Validator demo of the Grid](https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation).

## Employing jQuery Validation

To use jQuery for the client-side validation of the Model, follow the steps below:

1. Add the latest version of the <a href="https://www.nuget.org/packages/jQuery.Validation" target="_blank">`jquery.validate`</a> and <a href="http://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/" target="_blank">`jquery.validate.unobtrusive`</a> packages to the project.

2. Include the scripts in the View with the editors, which must be validated based on the user input or in the `_Layout.cshtml` file.

3. After registering the scripts, override the default `ignore` setting to enable the validation of the hidden elements—for example, helpers like the DropDownList and NumericTextBox have a hidden input, which holds the value.

   ```HTML
       <script src="@Url.Content("~/Scripts/jquery-validation/jquery.validate.min.js")"></script>
       <script src="@Url.Content("~/Scripts/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js")"></script>
       <script type="text/javascript">
           $.validator.setDefaults({
               ignore: ""
           });
       </script>
   ```

4. Define the Model and the editors on the View.

## See Also

* [Validating Telerik UI for ASP.NET MVC Editors (Demo)](https://demos.telerik.com/aspnet-mvc/validator)

* [Kendo UI for jQuery Validator](https://docs.telerik.com/kendo-ui/controls/validator/overview)

* [Telerik UI for ASP.NET MVC Fundamentals](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/fundamentals-mvc)

* [Telerik UI for ASP.NET MVC Troubleshooting on Validation](https://www.telerik.com/aspnet-mvc/documentation/troubleshoot/troubleshooting-validation)