Hello
I'm trying to solve some annoying issues related to Grid Pop-up Editing Validation:
1. Most annoying is validation errors are hiding my fields so user cannot edit anything - see screen shots. I need to display this error message in more user friendly way - e.g on the right side of input, but I cannot achieve that.
2. All validations are based on custom validation so when focus is lost it is not fired - how to force such validation.
My template is looking like that:
java script for e.g. sortcode validation is - this part of dataSource schema:
The validation messages are only show on Update button.
3. Errors from server - how to display them in the same way as client side validation messages. (I'm using MVC- but usually with plain JavaScript without wrappers). I'm parsing errors in following way and display them in alert, I want to display them in line and prevent close form on update.
I'm trying to solve some annoying issues related to Grid Pop-up Editing Validation:
1. Most annoying is validation errors are hiding my fields so user cannot edit anything - see screen shots. I need to display this error message in more user friendly way - e.g on the right side of input, but I cannot achieve that.
2. All validations are based on custom validation so when focus is lost it is not fired - how to force such validation.
My template is looking like that:
<
div
>
<
div
class
=
"k-edit-label"
>Sort Code: </
div
>
<
div
class
=
"k-edit-field"
>
<
input
class
=
"k-input k-textbox"
type
=
"text"
name
=
"SortCode"
data-bind
=
"value: SortCode"
data-sortcodelength-msg
=
"Sort Code should be empty or have 6 digits."
onkeypress
=
"return isNumber(event)"
pattern
=
"[0-9]*"
type
=
"tel"
>
</
div
>
</
div
>
<
div
>
<
div
class
=
"k-edit-label"
>Account Number: </
div
>
<
div
class
=
"k-edit-field"
>
<
input
class
=
"k-input k-textbox"
type
=
"text"
name
=
"AccountNumber"
data-bind
=
"value: AccountNumber"
data-accountnumberlength-msg
=
"Account Number should be empty or between 8-10 digits."
data-accountnumbervalid-msg
=
"Account Number is invalid."
onkeypress
=
"return isNumber(event)"
pattern
=
"[0-9]*"
type
=
"tel"
>
</
div
>
</
div
>
<
div
>
<
div
class
=
"k-edit-label"
>Action: </
div
>
<
div
class
=
"k-edit-field"
>
<
input
name
=
"Success"
required
=
"required"
data-text-field
=
"text"
data-value-field
=
"value"
data-bind
=
"value: Success"
data-required-msg
=
"Action is required."
/>
</
div
>
</
div
>
SorCode: {
type: "string",
nullable: true,
validation: {
sortCodeLength: function (input) {
if (input.attr("name") == "SortCode") {
var strSortCode = input.val();
if (strSortCode.length === 0) {
return true;
}
if (!isNum.test(strSortCode)) {
return false;
}
if (strSortCode.length != 6) {
return false;
}
}
return true;
}
}
},
3. Errors from server - how to display them in the same way as client side validation messages. (I'm using MVC- but usually with plain JavaScript without wrappers). I'm parsing errors in following way and display them in alert, I want to display them in line and prevent close form on update.
error: function (e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
} else {
//alert("An error occured during saving call back.");
}
}