I have a page that requests a partial view via AJAX and inserts it into the page. The view contains several kendo DatePickers. When I leave some of the required DatePickers empty and try to submit the form, I'm noticing my validation summary (created by @Html.ValidationSummary(false)) is not displaying anything, though submission is prevented.
Yesterday I was receiving errors in the validation summary. I had one about a required DatePicker, that is in a hidden kendo Window being empty, and when I re-opened the window to address it, the validation error for the DatePicker was visible, but the DatePicker itself was gone.
So these specific problems aside for the moment, my question is: I know for the standard jQuery validation and unobtrusive scripts, I have to remove the validator data from the form and then re-parse the form after inserting content dynamically. Is something similar required for kendo validation? Do I need to call kendoValidator() again?
What I do for the standard asp.net MVC validation:
//Remove validators and re-add them to include the new fields
var
$form = $(form)
.removeData(
"validator"
)
.removeData(
"unobtrusiveValidation"
);
$.validator.unobtrusive.parse($form);
I have a kendo ui multiselect setup using the code method. It populates fine and I can select values. However if I leave the field blank then run a kendo custom kendoValidator the select field never gets to the custom validation. It's like a blank is being marked as valid. Which means it never even makes it to the custom rules.Is there a setting i need when i create the control to tell it that blanks are not OK?
@(Html.Kendo().MultiSelect()
.Name("JobSelected")
.HtmlAttributes(new { @required = "required", @validationMessage = "Enter Job", @class = "form-control job" })
.DataTextField("Text")
.DataValueField("Value")
.Placeholder("Select Jobs...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("JobsGetAll", "Application");
}).ServerFiltering(true);}).AutoBind(true))
//input is never the multiselect box
var validator = $("#personalDiv").kendoValidator({
rules: {
//implement your custom date validation
custom: function (input) {
if (input.is(".drp")) {
var ms = input.data("kendoDropDownList");
if (ms.value() == "-1") {
input.parent().addClass("k-invalid");
return false;
}
else {
input.parent().removeClass("k-invalid");
return true;
}
}
else if(input.is(".job"))
{
var ms = input.data("kendoMultiSelect");
if (ms.value().length === 0) {
input.parent().addClass("k-invalid");
return false;
}
else {
input.parent().removeClass("k-invalid");
return true;
}
}
else if(input.is(".date") && input.val() != "") {
var currentDate = Date.parse($(input).val());
//Check if Date parse is successful
if (!currentDate) {
return false;
}
//grad date needs to be in the future
if (input.is("#txtGradDate") || input.is("#txtStartDate")) {
var d = new Date();
if (currentDate < d) {
return false;
}
}
}
else if (input.is("[data-role=maskedtextbox]") && input.val() != "") {
var maskedtextbox = input.data("kendoMaskedTextBox");
return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
}
return true;
}
}
}).data("kendoValidator");
if (!validator.validate()) {
$("#personalDiv").removeClass("valid").addClass("invalid");
$('#btnPreviousPage').show();
$('#btnNextPage').show();
break;
} else {
$("#personalDiv").removeClass("invalid").addClass("valid");
}
We found that following features are totally undocumented , where <text> is a custom string :
Proofs in your code :
The CreateAttributes assembles object which contains the name:value pair from model field validation :
function
createAttributes(options) {
var
field = (options.model.fields || options.model)[options.field], type = fieldType(field), validation = field ? field.validation : {}, ruleName, DATATYPE = kendo.attr(
'type'
), BINDING = kendo.attr(
'bind'
), rule, attr = {
name: options.field,
title: options.title
};
for
(ruleName
in
validation) {
// ruleName can contains a custom string that is not a validation rule
// and rule will contain its value, for example validationMessage='MyMessage ....'
rule = validation[ruleName];
if
(inArray(ruleName, specialRules) >= 0) {
attr[DATATYPE] = ruleName;
}
else
if
(!isFunction(rule)) {
attr[ruleName] = isPlainObject(rule) ? rule.value || ruleName : rule;
}
attr[kendo.attr(ruleName +
'-msg'
)] = rule.message;
}
if
(inArray(type, specialRules) >= 0) {
attr[DATATYPE] = type;
}
attr[BINDING] = (type ===
'boolean'
?
'checked:'
:
'value:'
) + options.field;
return
attr;
}
The editor choosed by the kendo.ui.Editable sets DOM attributes via attr() and the previously assembled object
var
editors = {
'number'
:
function
(container, options) {
var
attr = createAttributes(options);
$(
'<input type="text"/>'
).attr(attr).appendTo(container).kendoNumericTextBox({ format: options.format });
$(
'<span '
+ kendo.attr(
'for'
) +
'="'
+ options.field +
'" class="k-invalid-msg"/>'
).hide().appendTo(container);
},
'date'
:
function
(container, options) {
var
attr = createAttributes(options), format = options.format;
if
(format) {
format = kendo._extractFormat(format);
}
attr[kendo.attr(
'format'
)] = format;
$(
'<input type="text"/>'
).attr(attr).appendTo(container).kendoDatePicker({ format: options.format });
$(
'<span '
+ kendo.attr(
'for'
) +
'="'
+ options.field +
'" class="k-invalid-msg"/>'
).hide().appendTo(container);
},
'string'
:
function
(container, options) {
var
attr = createAttributes(options);
$(
'<input type="text" class="k-input k-textbox"/>'
).attr(attr).appendTo(container);
},
'boolean'
:
function
(container, options) {
var
attr = createAttributes(options);
$(
'<input type="checkbox" />'
).attr(attr).appendTo(container);
},
'values'
:
function
(container, options) {
var
attr = createAttributes(options);
var
items = kendo.stringify(convertItems(options.values));
$(
'<select '
+ kendo.attr(
'text-field'
) +
'="text"'
+ kendo.attr(
'value-field'
) +
'="value"'
+ kendo.attr(
'source'
) +
'=\''
+ (items ? items.replace(/\
'/g, '
'
') : items) + '
\
''
+ kendo.attr(
'role'
) +
'="dropdownlist"/>'
).attr(attr).appendTo(container);
$(
'<span '
+ kendo.attr(
'for'
) +
'="'
+ options.field +
'" class="k-invalid-msg"/>'
).hide().appendTo(container);
}
};
The validator looks the ruleKey validationMessage directly on DOM element of a INPUT tag
var
Validator = Widget.extend({
// ...
_extractMessage:
function
(input, ruleKey) {
var
that =
this
, customMessage = that.options.messages[ruleKey], fieldName = input.attr(NAME), nonDefaultMessage;
if
(!kendo.ui.Validator.prototype.options.messages[ruleKey]) {
nonDefaultMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
}
customMessage = kendo.isFunction(customMessage) ? customMessage(input) : customMessage;
return
kendo.format(input.attr(kendo.attr(ruleKey +
'-msg'
)) || input.attr(
'validationMessage'
) || nonDefaultMessage || input.attr(
'title'
) || customMessage ||
''
, fieldName, input.attr(ruleKey) || input.attr(kendo.attr(ruleKey)));
}
// ...
})
With this technique you can customize one validation message for a model field
I would like to create a validation message only for dropdownlist.
I'd like to get the text value of label.
label is parent of kendo dropdownlist
var custom = function(input){
if(input.is("[data-role=dropdownlist]")){
if(Utils.isNullOrUndefined(input[0].value) || input[0].value.length === 0){
return true;
}
return input.data("kendoDropDownList").value();
}
return true;
}
rules.custom = custom;
messages.custom = function(input){
"Insert" + input.closest("label").text()
}
var validator = {
validate: function(){
$(".k-invalid:first").focus();
},
rules: rules,
messages: messages
};
return $("#form1").kendoValidator(validator).data("kendoValidator");
This solution doesn't work
kendo.d.ts v2017.3.1026
should be
interface DataSourceSchemaModelFieldValidation {
required?: boolean | { message: string };
}
to support custom required message.
I am new to Kendo UI and trying to implement required field validation inside Kendo grid. All the functionalities like add/update/delete functionalities are working except required field validation.
$(document).ready(function () {
var dataSource1 = new kendo.data.DataSource({
batch: true,
transport: {
// PUT /POST Codes
},
error: function(e){
alert('Error code: ' + e.xhr.status + ' - The application encountered an issue please try again. If issue persist contact grh support team');
},
pageSize: 500,
schema: {
model: { id:"Id", fields : { firstname : { editable : true , validation : { required : true }, type : "string" },createdby : { editable: false, defaultValue: "arjun.vadi"},createddate : { editable: false },modifiedby : { editable: false },modifieddate : { editable: false },tz : { editable: false, defaultValue: new Date().toString().substr(28,5) }} }
},
});
var grid = $("#grid").kendoGrid({
height: 620,
dataSource: dataSource1,
toolbar: ['create', 'save', 'excel'],
excel: {
fileName: "TestMandate" + "_Export.xlsx",
allPages: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Total: {2}"
}
},
navigatable: true,
sortable: true,
filterable: true,
resizable: true,
scrollable: true,
editable: true,
columns: [
{ command: [{ name: "destroy", text: "", width: "60px" }], title: " ", width: "100px" },
{ field: "firstname",title:"FirstName",editor: JSHelper.stringEditor, width: 100 , filterable: { multi: true, search: true } },{ field: "createdby",title: "Created By", width: 100, filterable: { multi: true, search: true } },{ field: "createddate",title: "Created Date", width: 100, editor : JSHelper.dateAdminEditor, template: "#= kendo.toString(kendo.parseDate(createddate), 'dd MMM yyyy hh:mm') #", filterable: { multi: true, search: true } },{ field: "modifiedby", title: "Modified By", width: 100, filterable: { multi: true, search: true, search: true } },{ field: "modifieddate", title: "Modified Date", width: 100, editor : JSHelper.dateAdminEditor, template: "#= kendo.toString(kendo.parseDate(modifieddate), 'dd MMM yyyy hh:mm') #", width:150, filterable: { multi: true, search: true } },
],
});
});
1.
<
div
class
=
"WebDescriptionEditor"
data-bind
=
"value: WebDescription"
data-role
=
"editor"
2.
contentEditable
=
"true"
3.
data-tools
=
"['bold','italic','underline','strikethrough']"
>
4.
</
div
>
1.
<
input
type
=
"hidden"
name
=
"WebDescription"
data-bind
=
"value: WebDescription"
/>
Hi, my KenDo UI version is 2017.3.913, my chrome version is 61.0.3163.100
I found that my custom validation rule only fire once when it get error,
here is DOJO code: http://dojo.telerik.com/OGIlA/3
you can re-enter this situation by these step:
1.open dojo link and enter full screen mode
2.open chrome dev tool and set break point on line 72 (
myrule:
function
(input){...
)
3.click edit button and change unit price to 7777, then it will enter break point.
4.continue, and change value to 7778, then it will enter break point again.
5.continue and change value to 7777, then you can see it will not enter break point ,no fire validate function.
I don't know where I do wrong, or something I forget to setting, please help , thanks.
I have a kendo grid with in cell editing. I extended the validator to add a new validation rule and message. This is working correctly.
However, I can't seem to change the default error template for the validation message. Here is the code used to extend the validator:
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: {
uniqueTagName: function (input) {
...
},
messages: {
uniqueTagName: resources.Message_TagAlreadyExists
},
errorTemplate: "<
span
>#=message# TEST</
span
>"
});
})(jQuery, kendo);
I can see from the console that when I look at kendo.ui.validator, the errorTemplate is changed to "<span>#=message# TEST</span>". However, when the (Name) element is validated, I get the default error template.
Through $("#Name").kendoValidator().data("kendoValidator"), i get this template:
<span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"> </span> #=message#</span>
However,both validators have the extended rule and validation message.
I also tried to create a <span data-for="Name" class="k-invalid-msg"> as I have found somewhere in the documentation, but this seems to have no effect.