I have an ASP.NET Core, Angular (2) grid and popup and I am trying to implement custom validation on more than one field.
If I try to implement two versions of custom validation, shown below, then the second validation doesn't run until the first passes, which is fine, but then the second validation message does not appear in the popup.
schema: {
model: {
id: "contactID",
fields: {
contactID: { type: "number" },
lastName: { type: "string" },
firstName: { type: "string" },
name: { type: "string" },
jobTitle: { type: "string" },
jobTitleID: {
type: "number",
validation: {
jobTitleIdValidation: function (input, params) {
if (input.is("[name='jobTitleID']")) {
var $jobTitleId = kendo.jQuery('#jobTitleID');
var jobTitleIdValue = $jobTitleId.data("kendoComboBox").value();
if (parseInt(jobTitleIdValue, 10) === 0 || !jobTitleIdValue) {
$jobTitleId.attr('data-jobTitleIdValidation-msg', 'Job title is required');
return false;
} else {
return true;
}
}
}
}
},
office: {
type: "string"
},
officeID: {
type: "number",
validation: {
officeIdValidation: function (input, params) {
if (input.is("[name='officeID']")) {
var $officeId = kendo.jQuery('#officeID');
var officeIdValue = $officeId.data("kendoComboBox").value();
if (parseInt(officeIdValue, 10) === 0 || !officeIdValue) {
$officeId.attr('data-officeIdValidation-msg', 'Office is required');
return false;
} else {
return true;
}
} else {
return true; // for any other input
}
}
}
},
Template code fragment:
editable: {
mode: "popup",
template:
`<div id="details" _ngcontent-c2>
<div><label for="firstName">First Name</label>
<input id="firstName" data-bind="value: firstName" /></div>
<div><label for="lastName">Last Name</label>
<input id="lastName" data-bind="value: lastName" /></div>
<div><label for="email">Email</label>
<input id="email" data-bind="value: email" /></div>
<div><label for="phone">Phone</label>
<input id="phone" data-bind="value: phone" /></div>
<div><label for="mobile">Mobile</label>
<input id="mobile" data-bind="value: mobile" /></div>
<div><label for="jobTitleID">Job Title</label>
<input id="jobTitleID" name="jobTitleID" data-bind="value: jobTitleID" /></div>
<div class="validator-msg"><span data-for="jobTitleID" class="k-invalid-msg"></span></div>
<div><label for="officeID">Office</label>
<input id="officeID" name="officeID" data-bind="value: officeID" /></div>
<div class="validator-msg"><span data-for="officeID" class="k-invalid-msg"></span></div>
</div>
If, however, I attempt all the validation in one custom validation rule (which seems to be expected), and using one validation message-span (under jobTitleId) it does not display a message for officeID after the jobTitleID has been provided. Code here:
jobTitleID: {
type: "number",
validation: {
customValidation: function (input, params) {
var $jobTitleId = kendo.jQuery('#jobTitleID');
if (input.is("[name='jobTitleID']")) {
var jobTitleIdValue = $jobTitleId.data("kendoComboBox").value();
if (parseInt(jobTitleIdValue, 10) === 0 || !jobTitleIdValue) {
$jobTitleId.attr('data-customValidation-msg', 'Job title is required');
return false;
} else {
return true;
}
} else if (input.is("[name='officeID']")) {
var officeIdValue = kendo.jQuery('#officeID').data("kendoComboBox").value();
if (parseInt(officeIdValue, 10) === 0 || !officeIdValue) {
$jobTitleId.attr('data-customValidation-msg', 'Office is required');
return false;
} else {
return true;
}
} else {
return true; // for any other input
}
}
}
How can I get this to behave correctly? I suspect it has something to do with return true at the end(?)
Note that I don't want to just use the required: true attribute because a default 0 value is being displayed and I will also need to validate a combination of fields.
from kendoGrid popup custom validation, multiple fields
No comments:
Post a Comment