Validation

Telerik UI for ASP.NET Core enables you to use client-side validation by utilizing the Kendo UI for jQuery Validator or the default jQuery validation.

This article covers the implementation of validation using DataAnnotation attributes 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 and ListView, or use the jQuery validation when using Telerik UI for ASP.NET Core components.

Using DataAnnotation Attributes

The Telerik UI HTML and Tag 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 Core editors support the following DataAnnotation attributes:

• DataTypeAttribute
• EmailAddress
• MaxLengthAttribute
• MinLengthAttribute
• Range
• RegularExpression
• Required
• StringLength
• UrlAttribute

The HTML5 data-* attributes 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 Kendo UI for jQuery Validator must be activated on the form that contains the editor components. The Validator automatically creates validation rules based on the unobtrusive HTML attributes. Also, the Validator creates rules for the unobtrusive attributes that are generated implicitly by ASP.NET Core for numbers and dates.

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; }
       }

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

   C#

       public IActionResult Create()
       {                
           return View(new OrderViewModel());
       }

3. Create the editors in the View based on the Model properties and initialize the Validator on the form by setting kendo-validator="true" in the form's tag.

   Razor

       @addTagHelper *, Kendo.Mvc
       @model OrderViewModel
   
       <form id="exampleForm" asp-controller="Home" asp-action="Create" method="post" class="k-form k-form-vertical" kendo-validator="true">
           <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>
                   @(Html.Kendo().Button()
                       .Name("submitBtn")
                       .HtmlAttributes(new { type = "submit" })
                       .Content("Submit")
                   )
               </p>
           </fieldset>
       </form>

   Razor

       @addTagHelper *, Kendo.Mvc
       @model OrderViewModel
   
       @{
   
           var countriesOptions = new List<string>() {
               "Country A",
               "Country B",
               "Country C"
           };
       }
   
       <form id="exampleForm" asp-controller="Home" asp-action="Create" method="post" class="k-form k-form-vertical" kendo-validator="true">
           <fieldset>
               <legend>Order</legend>
   
               <input type="hidden" asp-for="OrderID" />
   
               <div class="editor-label">
                   <label asp-for="CustomerID"></label>
               </div>
               <div class="editor-field">
                   <kendo-textbox for="CustomerID"></kendo-textbox>
                   <span asp-validation-for="CustomerID"></span>
               </div>
               <div class="editor-label">
                   <label asp-for="ShipCountry"></label>
               </div>
               <div class="editor-field">
                   <kendo-dropdownlist for="ShipCountry"
                       bind-to="countriesOptions">
                   </kendo-dropdownlist>
                   <span asp-validation-for="ShipCountry"></span>
               </div>
   
               <div class="editor-label">
                   <label asp-for="Freight"></label>
               </div>
               <div class="editor-field">
                   <kendo-numerictextbox for="Freight"></kendo-numerictextbox>
                   <span asp-validation-for="Freight"></span>
               </div>
   
               <div class="editor-label">
                   <label asp-for="OrderDate"></label>
               </div>
               <div class="editor-field">
                   <kendo-datepicker for="OrderDate" 
                       date-input="true">
                   </kendo-datepicker>
                   <span asp-validation-for="OrderDate"></span>
               </div>
               <p>
                   <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
               </p>
           </fieldset>
       </form>

   Alternatively, you can initialize the Validator with jQuery when the page with the form is loaded:

   Razor

       @model OrderViewModel
   
       <form id="exampleForm" asp-controller="Home" asp-action="Create" method="post" class="k-form k-form-vertical">
           ...
       </form>
   
       <script>
        $(document).ready(function() {
            $("#exampleForm").kendoValidator(); // Select the form by "id" or "class" with jQuery.
        });
       </script>

For a live example, visit the Basic Usage demo of the Validator.

Implementing Custom Attributes

To use custom DataAnnotation attributes, define the custom rules 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 IClientModelValidator interface. Add the IsValid and AddValidation methods.

   C#

       [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
       public class GreaterDateAttribute : ValidationAttribute, IClientModelValidator
       {
           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 void AddValidation(ClientModelValidationContext context)
           {
               MergeAttribute(context.Attributes, "data-val", "true");
               var errorMessage = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
               MergeAttribute(context.Attributes, "data-val-greaterdate", errorMessage);
   
               context.Attributes["earlierdate"] = EarlierDateField;
           }
   
           // Helper method
           private bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
           {
               if (attributes.ContainsKey(key))
               {
                   return false;
               }
               attributes.Add(key, value);
               return true;
           }
       }

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
   
       <form id="exampleForm" asp-controller="Home" asp-action="Create" method="post" class="k-form k-form-vertical">
           <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>
                   @(Html.Kendo().Button()
                       .Name("submitBtn")
                       .HtmlAttributes(new { type = "submit" })
                       .Content("Submit")
                   )
               </p>
           </fieldset>
       </form>

   Razor

       @addTagHelper *, Kendo.Mvc
       @model OrderViewModel
   
       <form id="exampleForm" asp-controller="Home" asp-action="Create" method="post" class="k-form k-form-vertical">
           <fieldset>
               <legend>Order</legend>
               <input type="hidden" asp-for="OrderID" />
               <div class="editor-label">
                   <label asp-for="OrderDate"></label>
               </div>
               <div class="editor-field">
                   <kendo-datepicker for="OrderDate" >
                   </kendo-datepicker>
                   <span asp-validation-for="OrderDate"></span>
               </div>
               <div class="editor-label">
                   <label asp-for="ShippedDate"></label>
               </div>
               <div class="editor-field">
                   <kendo-datepicker for="ShippedDate" >
                   </kendo-datepicker>
                   <span asp-validation-for="ShippedDate"></span>
               </div>
               <p>
                   <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
               </p>
           </fieldset>
       </form>

   Html

       <script>
           $(function () {
               $("#exampleForm").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("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 IActionResult 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#

    using System.ComponentModel.DataAnnotations;
    using System.Text.RegularExpressions;

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

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

	public class CustomProductNameValidationAttribute : ValidationAttribute
	{		
		public override bool IsValid(object value)
		{
			var productName = (string)value;
			if (!string.IsNullOrEmpty(productName))
			{
				return Regex.IsMatch(productName, "^[A-Z]");
			}
			return true;
		}
	}

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

TagHelper_View

    @addTagHelper *, Kendo.Mvc

    <kendo-grid name="grid">
        <datasource type="DataSourceTagHelperType.Ajax">
            <schema data="Data" total="Total">
                <model id="ProductID">
                    <fields>
                        <field name="ProductID" type="number" editable="false"></field>
                        <field name="ProductName" type="string"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="@Url.Action("Read", "Products")"/>
                <update url="@Url.Action("Update", "Products")"/>
            </transport>
        </datasource>
        <columns>
            <column field="ProductID"/>
            <column field="ProductName"/>
            <column width="200">
                <commands>
                    <column-command text="Edit" name="edit"></column-command>
                </commands>
            </column>
        </columns>
        <editable mode="inline"/>
        <pageable enabled="true"/>
        <scrollable enabled="true"/>
    </kendo-grid>

Html

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

For a live example, visit the Custom Validator demo of the Grid.

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 jquery.validate and jquery.validate.unobtrusive 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="~/lib/jquery-validation/jquery.validate.min.js"></script>
       <script src="~/lib/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 Core Editors (Demo)

• Kendo UI for jQuery Validator

• Telerik UI for ASP.NET Core Fundamentals