jquery - Kendo UI 验证器错误消息未正确定位

Question

我正在尝试使用 KendoUI 验证联系表单，但我遇到了 Kendo Validator 问题，验证消息没有出现在每个字段旁边应该出现的位置，它出现在我单击的第一个字段旁边当页面加载时，当我点击一个不同的字段时，验证消息会改变但它的位置不会改变，它保持在我点击的第一个字段旁边。我希望你能帮助我，谢谢。

正如您在此处看到的，应该添加工具提示的跨度仅出现在我单击的元素中：

在 Telerik 的示例中，它出现在每个必需的元素上： 这基本上是我正在使用的代码：

<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>

一个JS

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

这与 Telerik 的示例中的代码基本相同： KendoUI Validator example

Answer 1

正如@OnaBai 在他的评论中所说，通过确保您name在所有经过验证的字段上都有一个属性来纠正这个问题。

Kendo Validator 需要一种方法来确定哪些字段得到验证。首先，验证器检查带有name属性的输入，如果没有找到，我发现它的行为不正常。

Telerik 不幸地疏忽了此要求的文档，因为我（而且我相信许多其他开发人员）花了很多时间来解决这个问题。

Answer 2

问题是您在根表单级别 ( '#contact-form') 定义了验证器。您应该为每个元素定义它：

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

Answer 3

试试这个：问题是您将验证设置为输入，然后在初始化期间将其包装在其他几个元素中。然而，验证器使用原始输入在其旁边显示其消息，从而覆盖其他元素。要强制它使用特定位置作为提示，请放置一个带有 data-for="your_input_id" 和 class="k-invalid-msg" 的跨度，以便验证器可以识别和使用它。像这样的东西：

<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>

这来自： http ://www.telerik.com/forums/is-there-a-way-to-control-the-position-of-validation-messages

Answer 4

只需将“名称”属性添加到每个输入元素