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

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

2. 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.