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

Client, Require field validation messages showing below.

1 Answer 414 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Chatra
Top achievements
Rank 1
Chatra asked on 09 Jun 2014, 08:01 PM
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"
      });

1 Answer, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 11 Jun 2014, 12:20 PM
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!
 
Tags
Validation
Asked by
Chatra
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or