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

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.