
var
peopleData = [
{ Id: 1, FirstName:
"Person"
, LastName:
"One"
, Birthday:
new
Date(1973, 11, 30) },
{ Id: 2, FirstName:
"Person"
, LastName:
"Two"
, Birthday:
new
Date(1967, 9, 5) }
];
var
peopleDataSource =
new
kendo.data.DataSource({
data: peopleData,
schema: {
model: {
id:
"Id"
,
fields: {
Id: { type:
"number"
},
FirstName: { type:
"string"
},
LastName: { type:
"string"
},
Birthday: {
type:
"date"
,
validation: {
rules: {
custom:
function
(input) {
if
(console != undefined) { console.log(input); }
var
today =
new
Date();
return
input < today;
}
},
messages: {
custom:
"Birthday cannot be in the future"
}
}
}
}
}
}
});
The grid is defined as follows:
$(
"#personGrid"
).kendoGrid({
dataSource: peopleDataSource,
editable:
true
,
columns: [{
field:
"FirstName"
,
title:
"First Name"
},{
field:
"LastName"
,
title:
"Last Name"
},{
field:
"Birthday"
,
title:
"Birthday"
,
template:
"#= kendo.toString(Birthday, 'MM/dd/yyyy') #"
}]
});
When I edit the Birthday field, the custom validation defined in the peopleDataSource for the Birthday field is not called.
What am I doing wrong?
I am using Kendo UI, version: 2012.1.322.open-source.
Code is attached.
Regards,
John DeVight
2 Answers, 1 is accepted
Setting custom validation for fields during grid editing requires slightly different syntax:
Birthday: {
type:
"date"
,
validation: {
custom:
function
(input) {
// set the custom message
input.attr(
"data-custom-msg"
,
"Birthday cannot be in the future"
);
if
(console != undefined) { console.log(input); }
var
today =
new
Date();
return
input < today;
}
}
}
All the best,
Rosen
the Telerik team
For anyone else who looks at this, I also had to correct my validation code. I had assumed that the "input" parameter that was passed in was the value of the input field and not the input field itself. Here are the changes to the datasource:
var
peopleDataSource =
new
kendo.data.DataSource({
data: peopleData,
schema: {
model: {
id:
"Id"
,
fields: {
Id: { type:
"number"
},
FirstName: { type:
"string"
},
LastName: { type:
"string"
},
Birthday: {
type:
"date"
,
validation: {
custom:
function
(input) {
if
(console != undefined) { console.log(input); }
input.attr(
"data-custom-msg"
,
"Birthday cannot be in the future"
);
return
new
Date(input.val()) <
new
Date();
}
}
}
}
}
}
});
As you may know you are not constraint to use custom as a name for all custom rules. Thus, you should pick meaningful names for the rules in the context of single field.
PromoCodeName: {
type:
"string"
,
validation: {
required: { message:
"A Promo Code Name is Required!"
},
nameCheckLength:
function
(input) {
input.attr(
"data-nameCheckLength-msg"
,
"A Promo Code Name Cannot Be Longer Than 15 Characters!"
);
return
input.val().length <= 15;
}
}
},
PromoCodeDescription: {
type:
"string"
,
validation: {
required: { message:
"A Promo Code Description is Required!"
},
descriptionCheckLength:
function
(input) {
input.attr(
"data-descriptionCheckLength-msg"
,
"A Promo Code Description Cannot Be Longer Than 20 Characters!"
);
return
input.val().length <= 20;
}
}
}
Rosen
the Telerik team
Regards,
Doug
Below is my schema definition
schema: {
model: {
id: "Id",
fields: {
EmailId: { type: "string", editable: true, nullable: false,
validation: {
required: { message: "EMail ID Required." },
validateEmailFormat: function (input) {
input.attr("data-validateEmailFormat-msg", "Email format invalid.");
return checkEmail(input.val());
}
}
},
FirstName: { editable: true, nullable: false, validation: {
required: { message: "First Name Required." }
}
},
LastName: { editable: true, nullable: false, validation: {
required: { message: "Last Name Required."}
}
},
UserId: { editable: true, validation: {
required: { message: "User ID Required." }
}
},
Id: { editable: false }
}
}
}
the checkEmail method implementation is below
function checkEmail(val) {
var emailFormat = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (val == "") {
return false;
} else if (val.search(emailFormat) == -1) {
return false;
}
return true;
}
I am facing a issue similar to Doug, the error tooltip message is being displayed for the firstname, lastname and userid fields even though they have valid values. Am i doing something wrong?
Could you please provide a jsFiddle test page in which this issue can be observed?
Regards,Rosen
the Telerik team
Tried creating a jsfiddle page but was facing some issue so attaching a test file.
Regards,
Sarvesh
As you are using popup edit mode (and the validation rules will be executed against every input element), the custom validation logic should be a bit more involved. This way it will identify the correct element on which the specific rule should be executed:
EmailId: {
validation: {
validateEmailFormat:
function
(input) {
input.attr(
"data-validateEmailFormat-msg"
,
"Email format invalid."
);
if
(input.is(
"name=EmailId"
)) {
// check if this is the element to validate
return
checkEmail(input.val());
}
return
true
;
}
}
Regards,
Rosen
the Telerik team
Regards,
Sarvesh
It would be really nice to know if this approach works across all the widgets in your web library:
UI WIDGETS
Including any notes on special cases with each widget.
PS--This page gives a hint of what could be done, but it seems to rely on "declarative (HTML) initialization" rather than the datasource model:
http://www.kendoui.com/forums/framework/validation/validation-messages-on-window.aspx
Thanks,
Jeff
Price is a field and the validation is: make sure is numeric
This is what worked for me:
Price: { editable: true, type: "double", validation: { required: true, custom: function (input) { input.attr("data-custom-msg", "Price is not valid"); // check if this is the element to validate - required for the popup edit mode if (input.attr("data-bind") == "value:Price") { return $.isNumeric(input.val()); } return true; } } },Good luck!
I've validated some columns with custom functions as I show you:
Placement: { type:
"string"
,
validation:{
required:
true
,
PlaceCheck: function(input){
if
(input.attr(
"data-bind"
) ==
"value:Placement"
){
input.attr(
"data-placeCheck-msg"
,
"El placement es requerido."
);
var placeValue = input.val();
return
placeValue !=
null
;
}
return
true
;
}
}
},
Format: { type:
"string"
},
Size: { type:
"string"
,
validation:{
SizeCheck: function(input){
//Set the custom message
if
(input.attr(
"data-bind"
) ==
"value:Size"
){
input.attr(
"data-sizeCheck-msg"
,
"El valor introducido para el tamaño no es correcto. Se espera ancho(X*x)alto."
);
//Validar el formato del campo formato
var regEx =
"^[0-9]{1,4}[X*x][0-9]{1,4}$"
;
var sizeValue = input.val();
return
sizeValue.match(regEx);
}
return
true
;
}
}
},
StartDate: { type:
"date"
,validation:{ required:
true
} },
EndDate: { type:
"date"
,validation:{ required:
true
} },
Validations works fine, but when I introduce the right data and later I get the data for the row selected in order to save it, the value for these columns are empty. If I remove the validation option from the column it works fine but I don't have validation.
I have in the change event the next:
change: function() {
var text =
""
;
var grid =
this
;
grid.select().each(function() {
itemSelected = grid.dataItem($(
this
));
});
},
Can anyone help me, please?
Thanks in advance.
How do i apply the validation settings on a customer editor template?
ie. validation: { required: true, min: 1 }
ie.validation: { required: { message: "A Promo Code Name is Required!" },
nameCheckLength: function (input) {
input.attr("data-nameCheckLength-msg", "A Promo Code Name Cannot Be Longer Than 15 Characters!");
return input.val().length <= 15;
}
}
Is there an example of setting common attributes, like email, number formats, currency, min-max values etc. which can be applied to a custom popup editor template. Also can the editor widget be used in the edit template like in telerik MVC version?
regards
chris
It appears any custom validator applied to a FIELD in the MODEL ends up being called for every field that has a corresponding bound input element (I have verified this in script). I do not see how this could possibly be correct.
This seems to be a bug, and should be marked as so!
I have a grid and am doing custom validation for the grid popup like you suggested in this thread to ROSEN a few posts previously
EmailId: {
validation: {
validateEmailFormat: function(input) {
input.attr("data-validateEmailFormat-msg", "Email format invalid.");
if (input.is("name=EmailId")) { // check if this is the element to validate
return checkEmail(input.val());
}
return true;
}
}
But I just cannot figure out how to compare 1 field in the popup to another in the same popup. Like in the example above, I want to compare EmailID to another email field in the popup called EmailID2 . How do I "FIND" or "REFERENCE" the other field in the function above validateEmailFormat:
Thanks in advance!
You could use the supplied input element to get a reference to the parent container in which to search for the appropriate input element for the comparison. For example:
validateEmailFormat:
function
(input) {
if
(input.is(
"name=EmailId"
)) {
var
otherEmail = input.closest(
".k-edit-form-container"
).find(
"input[name=Email2]"
).val();
return
compare(input.val(), otherEmail);
}
return
true
;
}
Regards,
Rosen
Telerik
schema: {
model: {
id: "AuctionID",
fields: {
AuctionID: {
editable: false,
type: "number"
},
EndDate: {
type: "date",
validation: {
required: { message: "End Date is Required!" },
validateEndDate: function (input) {
if (input.attr("data-bind") == "value:EndDate") { // check if this is the element to validate
alert("We are in End Date");
// I WANT TO COMPARE END DATE to START DATE - I get NULL REFERENCE HERE
var startDate = input.closest(".k-edit-form-container").find("input[name=StartDate]").val();
}
return true;
}
}
},
Even using this does not work: if (input.is("name=EndDate")) {
Seems I have to say it like this:
if (input.attr("data-bind") == "value:EndDate")
So I still don't know how to get a reference to another item in my schema to compare to. My grid has 2 dates among other fields and I am using popup editing and I need to make sure startdate is < enddate.
And I am not sure where you come up with ".k-edit-form-container"
Sorry - coming from webforms and server controls - this is really tricky for me!
Thanks!
function dateTimeEditor(container, options) {
$('<input data-text-field="' + options.field + '" name = "' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({});
}
PromoCodeName: {
type:
"string"
,
validation: {
rules: {
required:
true
,
custom:
function
(input) {
return
input.val().length > 15;
}
},
messages: {
required:
"A Promo Code Name is Required!"
,
custom:
"A Promo Code Cannot Be Longer Than 15 Characters!"
}
}
},
PromoCodeDescription: {
type:
"string"
,
validation: {
rules: {
required:
true
,
custom:
function
(input) {
return
input.val().length > 20;
}
},
messages: {
required:
"A Promo Code Description is Required!"
,
custom:
"A Promo Code Description Cannot Be Longer Than 20 Characters!"
}
}
},
I am, however, like the OP, working inside the grid. What is the correct syntax for doing multiple validations on multiple fields with custom messages so that one validation does not overlap another. Or is there something I'm missing altogether?
Regards and Thanks for Your Time,
Doug