CODEWITHSUNDEEP
jqueryjquery-pluginskendo-uikendo-validator
Andrés Orozco
Andrés Orozco

Reputation: 2661

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

Upvotes: 2

Views: 9182

Answers (4)

IgorP
IgorP

Reputation: 1

Just add "name" attribute to each input element

Upvotes: 0

U A
U A

Reputation: 139

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

Upvotes: 0

Fillip Peyton
Fillip Peyton

Reputation: 3657

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.

Upvotes: 7

OnaBai
OnaBai

Reputation: 40887

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

Upvotes: 2

Related Questions