)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve the required field validation for DatePicker control in ASP.NET MVC?

Platform: ASP.NET MVC |
Control: DatePicker |
Published Date: September 21, 2015 |
Last Revised Date: May 7, 2019

Client and Server-side validations for EJ Form controls

The list of form controls available in the Essential Studio are as follows:

  1. DatePicker.
  2. DateTimePicker.
  3. Numeric, Currency, and Percentage Textbox.
  4. Autocomplete and Dropdown list.
  5. Mask Edit.
  6. Checkbox and Radio button.

You can add both client-side and server-side validations for these components. The following section explains how to achieve this.

 

To add client-side validation

JQuery validation

An inbuilt jQuery validation support is available for the form controls. jQuery validation can be achieved via ValidationRules and ValidationMessage properties. The ValidationRules property is used to define the jQuery validate rules for the control and ValidationMessage is used to define the respective error message for the rules that are specified in the ValidationRules property. When error message is not specified to the validation rules, it takes the default validation error message. The ValidationRules and ValidationMessage properties work within a form element, but otherwise it does not work. Before using those properties, you need to add the jQuery validate plugin (jquery.validate.min.js) to your application. This is showcased in the following code example.

 

@Html.EJ().DatePicker("DatePick").DateFormat("MM/dd/yyyy").Locale("en-US").ValidationRules(r=>r.AddRule("required",true)).ValidationMessage(m=>m.AddMessage("required","Date Value required "))
@Html.EJ().NumericTextbox("numeric").Value(100).ValidationRules(r=>r.AddRule("min",50)).ValidationMessage(m=>m.AddMessage("min","Value Should be greater than 50"))

 

HTML5 Validation

You can get the HTML 5 validation in the component with help of the HtmlAttributes API. This API is used to add the HTML attributes to the respective elements. The HtmlAttributes is not only for HTML 5 validation, but it can also add the list of possible HTML attributes to the element. This is demonstrated in the following code example.

@*Defines the HtmlAttributes*@
@{
    IDictionary<string, object> datePickerAttr = new Dictionary<string, object>();
    datePickerAttr.Add("required", "required");
    IDictionary<string, object> numericAttr = new Dictionary<string, object>();
    numericAttr.Add("required", "required");
    numericAttr.Add("min", "50");
}
@Html.EJ().DatePicker("DatePick").DateFormat("MM/dd/yyyy").Locale("en-US").HtmlAttributes(datePickerAttr)
@Html.EJ().NumericTextbox("numeric").Value(100).HtmlAttributes(numericAttr)

 

Server-Side Validation

You can set the validation for the EJ Form control in the form post back by using the server-side validation. Follow the steps to achieve this.

  1. In model, apply Data Annotation attributes on the properties. In controller, validate the received data within the action method by checking the ModelState.IsValid property. In case it is false, then redirect to the view page with the error message for invalid values.

ModelState.isValid returns false when the input data is not valid, otherwise it returns true.

The following code examples displays the same.

    public class Datepicker_validation
    {
        public Datepicker_validation() { }
        [Display(Name = "DatePicker")]
        [Required(ErrorMessage = "Date value is required")]
        public string sampleDate
        { get; set; }
    }

 

@model ServerValidation.Models.Datepicker_validation
@using (Html.BeginForm("Index", "Default", FormMethod.Post))
{
    @Html.DisplayNameFor(model => model.sampleDate)
    @Html.EJ().DatePickerFor(model => model.sampleDate)
    @Html.ValidationMessageFor(model => model.sampleDate)
    <input type="submit" value="Post" />
}

 

     [HttpPost]
        public ActionResult Index(Datepicker_validation inc)
        {
            if (ModelState.IsValid)
                return View();   // Returns to respective view page for valid values.
            else               
                return RedirectToAction("DatePickerFeatures","DatePicker",inc);         // Returns to view page for invalid values.         
        }

 

  1. When you press the submit button on this page, then it posts the data to the server and the code written within Index action validates the input data by checking the ModelState.IsValid property. When the input data is not valid, then the ModelState.IsValid returns false and shows error.

 

 

 

 

 

 

 

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon