Andres Orozco Andres Orozco - 4 months ago 27
jQuery Question

Kendo UI validator error message not correctly positioned

I'm trying to validate a contact form using KendoUI, but I have a problem with Kendo Validator, the validation message is not apearing where it should appear that is next to each field, it is appearing just next to the first field where I click when page loads, and when I click a different field, the validation message changes but not its position, it keeps next to the first field I click. I hope you can help me, thanks.

As you can see here, the span that should add the tooltip only appears in the element I click:
enter image description here

When in the Telerik's example it appears on every required element:
enter image description here
This is basically the code I'm using:

<form action="contact.php" method="post" id="contact-form">
<ul>
<li>
<label for="contact-name">Nombre: </label>
<input type="text" placeholder="Nombre completo" id="contact-name" required validationMessage="Nombre completo por favor">
</li>
<li>
<label for="contact-company">Empresa: </label>
<input type="text" placeholder="Empresa" id="contact-company">
</li>
<li>
<label for="contact-phone">Telefono: </label>
<input type="tel" placeholder="Telefono" id="contact-phone" required validationMessage="Numero de telefono por favor">
</li>
<li>
<label for="contact-name">Correo electronico: </label>
<input type="email" placeholder="Correo electronico" id="contact-email" data-email-msg="Email format is not valid">
</li>
<li>
<label for="contact-subject">Asunto: </label>
<input type="text" placeholder="Asunto" id="contact-subject" required validationMessage="Asunto por favor">
</li>
<li>
<label for="contact-message">Mensaje: </label>
<textarea id="contact-message" cols="30" rows="10" placeholder="Ingrese el mensaje que desea enviar" required validationMessage="Mensaje por favor"></textarea>
</li>
<li>
<input type="submit" value="Enviar">
</li>
</ul>
</form>


An the JS

$('#contact-form').kendoValidator();


This is basically the same code as in Telerik's example:
KendoUI Validator example

Answer

The problem is that you define the validator at root form level ('#contact-form'). You should define it for each element:

$('input', '#contact-form').kendoValidator();
Comments