Client, Require field validation messages showing below.

[Chatra]

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

[Kiril Nikolov]

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