This is a migrated thread and some comments may be shown as answers.

Popup editing + validation

1 Answer 328 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marcin
Top achievements
Rank 1
Veteran
Marcin asked on 28 Jun 2013, 12:37 PM
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.");
           }
       }

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 01 Jul 2013, 12:16 PM
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;
        positionrelative;
    }
  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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Marcin
Top achievements
Rank 1
Veteran
Answers by
Daniel
Telerik team
Share this question
or