如何使用jQuery Validate添加错误图标和自定义验证消息？

5vf7fwbs 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(200)

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

下面是我的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); 
                            
                    },
                    
            });
        }

谢谢

jquery

来源：https://stackoverflow.com/questions/15836465/how-to-add-error-icon-and-custom-validation-message-using-jquery-validate

2条答案

按热度按时间

7lrncoxx1#

由于某种原因，我无法在控件下方获得错误消息。
默认情况下，错误消息放在label中，这是一个内联元素。
使用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

赞(0）回复(0）举报 2023-06-22

1rhkuytd2#

从文档中的选项可以传递到验证函数

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

所以你的代码应该是：

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

或者类似的东西
然后，您可以使用wrapper属性为您的错误指定容器。
此外，还可以使用errorClass属性更改错误类别。
您可以使用messages属性设置自定义消息。
然后你必须为你选择的选择器指定规则。
你也可以看看here
希望这个能帮上忙

赞(0）回复(0）举报 2023-06-22

我来回答

如何使用jQuery Validate添加错误图标和自定义验证消息？

2条答案

相关问题

热门标签

最新问答