Question

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

正如您在此处所看到的，应添加工具提示的范围仅出现在我单击的元素中： enter image description here

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

<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

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

<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

只需添加＆＃34; name＆＃34;属性到每个输入元素

Kendo UI验证程序错误消息未正确定位

4 个答案: