如何使用jquery添加erroricon和自定义验证消息？

Question

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9FUmpnYS5wbmcifQ==” alt =“在此处输入图像描述”>

这是我的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); 

                    },

            });
        }

谢谢

Answer 1

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

默认情况下，错误消息放置在作为嵌入式元素的label内。

使用the errorElement option将其更改为块级元素，它将自动包装。

请参阅：errorElement

http://jsfiddle.net/kH9NL/

您必须使用

$(document).ready(function () {

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

});

和highlight回调函数来操纵图标的放置和切换。

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

unhighlight

Answer 2

从选项的https://stackoverflow.com/a/14900826/594235您可以传递以验证功能

documentation

所以您的代码应该是：

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

或类似的东西。

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

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

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

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

您也可以看看

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

希望这会有所帮助