Validate If Value Is in the Correct Format
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery | Progress® Kendo UI® DateTimePicker for jQuery |
| Product Version | Tested up to version 2017.3.1026 |
Description
How can I validate whether the input of the user in the DatePicker is in the correct format?
Solution
Use the Kendo UI Validator and create a custom validation rule which validates the format of the date.
<h2>Use client-side validation:</h2>
<form id="form">
<input data-role="datepicker"
name="date"
data-bind="value: selectedDate"
id="date"
style="width: 20%">
<span class="k-invalid-msg" data-for="date"></span>
</form>
<script>
$(function () {
var viewModel = kendo.observable({
selectedDate: new Date(),
});
kendo.bind($("#form"), viewModel);
$("#form").kendoValidator({
rules: {
// Implement your custom date validation.
dateValidation: function (input, params) {
if (input.is("[name='date']") && input.val() != "") {
input.attr("data-datevalidation-msg", "Not a valid date in MM/dd/yyyy format!");
var date = kendo.parseDate(input.val(), "MM/dd/yyyy");
if (date) {
return true;
}
return false;
}
return true;
}
},
messages: { //custom rules messages
datevalidation: function (input) {
// Return the message text.
return input.attr("data-val-datevalidation");
}
}
});
})
</script>