1

我想使用 Jquery 插件添加错误图标和自定义验证消息。像这样

在此处输入图像描述

这是我的html代码，

    <input type="text" id="firstName" name="firstName" class="required" />
    <input type="text" name="lastName" class="required" /> <br>

    <input id="email" type="text" name="email" class="required" /> <br>

这是我的 HTML 代码，

我尝试过使用 errorPlacement 函数，但是由于某种原因，我无法在控件下方收到错误消息。我已经使用 prepentTo、appendTo、所有 jquery 函数来执行此操作。但没有运气！

function validateForm(){

            $("#register").validate({


                rules: {
                    firstName: {
                        required: true,
                        minlength: 2
                    }
                },
                    errorPlacement: function(error, element) {
                        error.insertAfter(element); 

                    },

            });
        }

谢谢

4

2 回答 2

1

从选项文档中，您可以传递给验证功能

errorPlacement: function(error, element) {
  error.appendTo( element.parent("td").next("td") );
}

所以你的代码应该是：

errorPlacement: function(error, element) {
  error.appendTo(element.parent()); 
}

或类似的东西。

然后你可以使用wrapper属性来为你的错误指定一个容器。

此外，您可以使用errorClass属性来更改错误类。

您可以使用messages属性来设置自定义消息。

然后你必须为你选择的选择器指定规则。

你也可以看看这里

希望这可以帮助

于 2013-04-05T14:57:14.437 回答
1

由于某种原因，我无法在控件下方收到错误消息。

默认情况下，错误消息放在label作为内联元素的 a 中。

使用该errorElement选项将其更改为块级元素，它将自动换行。

见：http: //jsfiddle.net/kH9NL/

$(document).ready(function () {

    $('#myform').validate({ 
        errorElement: "div",
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        }
    });

});

您必须使用highlight和unhighlight回调函数来操作图标的放置和切换。

这个答案提供了一个使用这两个回调函数的具体示例：

https://stackoverflow.com/a/14900826/594235

于 2013-04-05T16:21:42.953 回答