2

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

Andrés Orozco
  • 2,490
  • 5
  • 32
  • 48
  • Can you show the code that you use for defining the validator or even better some code that shows what you mean in JSFiddle, JSBin or http://trykendoui.telerik.com – OnaBai May 22 '14 at 18:37

4 Answers4

7

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.

Fillip Peyton
  • 3,637
  • 2
  • 32
  • 60
  • 1
    jesus I've just spent 40 mins trying to work out why this wasn't working properly... nothing cool if they don't state this in their documentation – 72GM May 06 '16 at 15:45
2

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();
OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • 4
    Actually, despite it works, there is another solution that is simply defining a `name="..."` attribute for each `input`. That's actually the difference with Kendo UI Validator example. – OnaBai May 22 '14 at 22:18
  • Thank you, but I have another question, how can I change Firefox default behavior when it shows a tooltip for when I try to send empty required elements, I don't want those tooltips to show, because with the Kendo Validatos tooltips is enough. – Andrés Orozco May 23 '14 at 10:12
0

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

U A
  • 139
  • 1
  • 10
0

Just add "name" attribute to each input element

IgorP
  • 1