Client, Require field validation messages showing below.

2 posts, 1 answers
  1. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 09 Jun 2014 Link to this post

    HI,

    The Required field validation some times showing below the fields and for some fields beside the text box properly.Please find the attachment.
     
    I have two fields State and Zip fields configured as below. Inspected items of the both the fields looks as below.
    //State ComboBox
    <td>
    <span class="k-widget k-combobox k-header" style="width: 180px;">
    <span class="k-dropdown-wrap k-state-default" unselectable="on" tabindex="-1">
    <input class="k-input" type="text" autocomplete="off" name="State_input" style="width: 100%;" role="combobox" aria-expanded="false" placeholder="Select..." tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="State_listbox" aria-busy="false" aria-activedescendant="State_option_selected">
    <span class="k-select" unselectable="on" tabindex="-1">
    <span class="k-icon k-i-arrow-s" unselectable="on" role="button" tabindex="-1" aria-controls="State_listbox">select</span>
    </span>
    </span>
    <input id="State" class="k-invalid" style="width: 180px; display: none;" validationmessage="This is a required field." required="required" data-value-primitive="true" data-bind="value:State.Code" name="State" data-role="combobox" aria-disabled="false" aria-readonly="false" aria-invalid="true">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em;" data-for="State" role="alert">
    <span class="k-icon k-warning"> </span>
    This is a required field.
    <div class="k-callout k-callout-n"></div>
    </div>
    </span>
    </td>
     
    //ZIp text Box
    <td>
    <input id="Zip" class="k-input k-textbox k-invalid" type="Zip" style="width:180px;" validationmessage="This is a required field." required="required" maxlength="10" data-bind="value:Zip" name="Zip" aria-invalid="true">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em;" data-for="Zip" role="alert">
    <span class="k-icon k-warning"> </span>
    This is a required field.
    <div class="k-callout k-callout-n"></div>
    </div>
    </td>

    This is how I have configured both the fields on popup Template

     <tr>
      <td>
    <
    input type="text" id="City" class="k-input k-textbox" name="City" data-bind="value:City"  maxlength="30" required="required" validationMessage="This is a required field." style="width:180px;"/>    
      </td>
    </tr>                           
     <tr>
          <td>
    <input id="State" name="State"  data-bind="value:State.Code"  data-value-primitive="true"  required="required" validationMessage="This is a required field." style="width: 180px;" />
      </td>
    </tr>
     <tr>
        <td>
    <input type="Zip" id="Zip" class="k-input k-textbox" name="Zip" data-bind="value:Zip" maxlength="10" required="required" validationMessage="This is a required field." style="width:180px;" />
    <span data-for="Zip" class="k-invalid-msg"></span>
     </td>
    </tr>

    Styles we have for server validation messages.
    .k-tooltip-validation.k-invalid-msg
    {
        display:inline-block;   
    }
      
    .k-invalid-msg .k-callout
    {
           display:none;
    }

    State Combobox
    $("#State").kendoComboBox({
              placeholder: "Select...",
              dataTextField: "Code",
              dataValueField: "Code",
              headerTemplate: '<div class="dropdown-header">' +
                                   '<span class="k-widget k-header">Code</span>' +
                                   '<span class="k-widget k-header">Name</span>' +
                               '</div>',
              valueTemplate: '<span>#:data.Code#</span>',
              template: '<span class="k-state-default">#:data.Code#</span>' +
                                     '<span class="k-state-default">#:data.Name#</span>',
              dataSource: {
                  transport: {
                      read: {
                          url: crudServiceBaseUrl + "/GetStates"
                      }
                  }
              },
              filter:"startswith"
          });

  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 11 Jun 2014 Link to this post

    Hello Chatra,

    In general you can customize the tooltip position for the validation messages using an additional span that hooks up to the control being validated using its name. Please see the following documentation article that explains it in details how to customize the tooltip position:

    http://docs.telerik.com/kendo-ui/getting-started/framework/validator/overview#customizing-the-tooltip-position

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top