Question

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

enter image description here

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

您可以通过documentation选项传递验证功能

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

所以你的代码应该是：

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

或类似的东西。

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

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

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

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

您还可以查看here

希望这有帮助

Answer 2

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

默认情况下，错误消息放在label内，这是一个内联元素。

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

请参阅：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

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

2 个答案: