Popup editing + validation

2 posts, 0 answers
  1. Marcin
    Marcin avatar
    187 posts
    Member since:
    Jan 2011

    Posted 28 Jun 2013 Link to this post

    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.");
               }
           }
  2. Daniel
    Admin
    Daniel avatar
    2226 posts

    Posted 01 Jul 2013 Link to this post

    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!
Back to Top