Popup editing + validation

[Marcin]

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:

<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>

java script for e.g. sortcode validation is - this part of dataSource schema:

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;
                           }
                       }
                   },

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.

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.");
           }
       }

[Daniel]

Hello Marcin,

I posted my reply in the support ticket on the same topic. For convenience, I am pasting it below:

1. You could override the styles for the validation message in order to show it next to the input:
   

   .k-tooltip-validation.k-invalid-msg
   {
       display:inline-block;
       position: relative;
   }

2. The code for the custom validation rule looks correct. I created a small jsBin example using similar setup. Please check it and let me know if I am missing something.
3. This code-library demonstrates how to prevent the popup from closing and show the messages.

Regards,
Daniel
Telerik