Hi Team,
I am using the Kendo DateTimePicker and validator to validate the dates. Please find the below code. The issue I am having is that I see the "error message" for all the fields even thought rules returns true for those field. For example, I see the error message for the fields that have return value "false" which is fine. However, after running the validator, once I click on each field, I see the error message for that field. Even though these field have return value "true" from the function I have attached. I do not understand why I see the error message for all the fields.
1) What I want is I have two conditions in the function (if, else if). If these conditions get true, I want to display the error message. Otherwise, no error message needs to display because those dates are valid.
2) Is there a way to clear/reset the error message if there is any for a specific date field.
I really appreciate your help team. Please get back to me as soon as you can, I am waiting for your relpy.
function executeMaxMinValidationOnEachDate(datesArray) {
//$("#validateEditableFields").kendoValidator({
var minDate = 0;
var maxDate = 2;
var validator = $("#validateEditableFields").kendoValidator({
rules: {
datepicker: function (input) {
var currDate = kendo.parseDate(input.val()).getTime();
if (maxDate === 10) {
if (input.is("[data-role=datetimepicker]") && currDate < datesArray[minDate]) {
return false;
}
}
else if (input.is("[data-role=datetimepicker]") &&
(currDate < datesArray[minDate] || currDate > datesArray[maxDate])) {
minDate++;
currentDate++;
maxDate++;
return false;
//return input.data("kendoDateTimePicker").value();
} else {
minDate++;
currentDate++;
maxDate++;
return true;
}
}
},
messages: {
datepicker: "Please enter valid date!$$$$"
}
}).data("kendoValidator");
validator.validate();
}
4 Answers, 1 is accepted
Hi Mayurbhai,
The messages showing under the wrong field can be avoided by making sure all fields have their "name" attribute set. So for example if you are initializing a DateTimePicker from this input element:
<input name="date1" id="date1" />Note that both the "id" and the "name" attributes are set.
Here's a dojo example in which 3 DateTimePickers are used: https://dojo.telerik.com/ihofAsOg
A valid date is between June 6 2021 and August 6 2021. If you set a valid date in the first picker and then set an invalid date in one of the others, the error message will be correctly shown below the picker that has an invalid date set.
Give this a try and let us know the results.
Regards,
Ivan Danchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Mayurbhai,
Sure, here it is:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/validator/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="validation-summary">
</div>
<form id="validateEditableFields" class="k-form k-form-vertical">
<ul class="k-form-group">
<li class="k-form-field">
<label for="date1" class="k-form-label">DateTimePicker1</label>
<span class="k-form-field-wrap">
<input name="date1" id="date1" />
</span>
<span class="k-invalid-msg" data-for="date1"></span>
</li>
<li class="k-form-field">
<label for="date2" class="k-form-label">DateTimePicker2</label>
<span class="k-form-field-wrap">
<input name="date2" id="date2" />
</span>
<span class="k-invalid-msg" data-for="date2"></span>
</li>
<li class="k-form-field">
<label for="date3" class="k-form-label">DateTimePicker3</label>
<span class="k-form-field-wrap">
<input name="date3" id="date3" />
</span>
<span class="k-invalid-msg" data-for="date3" ></span>
</li>
<li class="k-form-buttons">
<button class="k-button k-primary" type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</div>
<style>
</style>
<script>
$(document).ready(function() {
var validationSummary = $("#validation-summary");
$("#date1").kendoDateTimePicker({
value: new Date("2021/10/6"),
dateInput: true
});
$("#date2").kendoDateTimePicker({
value: new Date("2021/6/6"),
dateInput: true
});
$("#date3").kendoDateTimePicker({
value: new Date("2021/6/6"),
dateInput: true
});
var datesArray = [
1622926800000,
1622926800000,
1628197200000
];
var currentDate = 0;
$("form").submit(function(event) {
event.preventDefault();
executeMaxMinValidationOnEachDate(datesArray)
});
function executeMaxMinValidationOnEachDate(datesArray) {
//$("#validateEditableFields").kendoValidator({
var minDate = 0;
var maxDate = 2;
var validator = $("#validateEditableFields").kendoValidator({
rules: {
datepicker: function (input) {
var currDate = kendo.parseDate(input.val()).getTime();
if (maxDate === 10) {
if (input.is("[data-role=datetimepicker]") && currDate < datesArray[minDate]) {
return false;
}
}
else if (input.is("[data-role=datetimepicker]") &&
(currDate < datesArray[minDate] || currDate > datesArray[maxDate])) {
//minDate++;
//currentDate++;
//maxDate++;
return false;
//return input.data("kendoDateTimePicker").value();
} else {
//minDate++;
//currentDate++;
//maxDate++;
return true;
}
}
},
messages: {
datepicker: "Please enter valid date!$$$$"
}
}).data("kendoValidator");
if (validator.validate()) {
validationSummary.html("<div class='k-messagebox k-messagebox-success'>Success! All dates are between 2021/6/6 and 2021/8/6!</div>");
} else {
validationSummary.html("<div class='k-messagebox k-messagebox-error'>At least one date is not in the 2021/6/6-2020/8/6 interval.</div>");
}
}
});
</script>
</body>
</html>
Regards,
Ivan Danchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran