Kendo UI validator error message not correctly positioned

Question

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:

When in the Telerik's example it appears on every required element: 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 1

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();

Answer 2

As @OnaBai stated in his comment, this issue is corrected by making sure you have a name attribute on all of your validated fields.

Kendo Validator needs a way to determine which fields get validated. First, the validator checks for inputs with name attributes, and if it doesn't find any, I've seen it behave erratically.

The lack of documentation of this requirement is an unfortunate oversight by Telerik, as I (and I'm sure many other devs) spent lots of time troubleshooting this.

Answer 3

Try this: The problem is that you set the validation to an input, which later gets wrapped in several other elements during initialization. However the Validator uses the original input to show its message beside it, thus covering other elements. To force it to use specific place for its hint, place a span with data-for="your_input_id" and class="k-invalid-msg", so that the Validator can recognize and use it. Something like this:

<label for="search">Movie</label>
<input type="search" id="search" name="search" required validationMessage="Please select movie"/>
<span class="k-invalid-msg" data-for="search"></span>

This is from: http://www.telerik.com/forums/is-there-a-way-to-control-the-position-of-validation-messages

Answer 4

Just add "name" attribute to each input element