如何使用jquery添加erroricon和自定义验证消息? [英] how to add erroricon and custom validation message using jquery?

问题描述

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

I Would like to add error icon and custom validation message using Jquery plugin. Like this

这是我的html代码，

Here is my html code,

    <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函数来做到这一点.但没有运气！！！

I have tried with errorPlacement function, however for some reason i am not able to get error message below the control. I have used prepentTo, appendTo, all jquery function to do this. but no luck!!!

function validateForm(){

            $("#register").validate({


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

                    },

            });
        }

谢谢

推荐答案

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

for some reason i am not able to get error message below the control.

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

By default, the error message is put inside a label which is an inline element.

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

Use the errorElement option to change this into a block level element and it will wrap automatically.

请参阅: http://jsfiddle.net/kH9NL/

See: http://jsfiddle.net/kH9NL/

$(document).ready(function () {

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

});

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

You must use the highlight and unhighlight callback functions to manipulate the placement and toggling of your icons.

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

This answer provides a concrete example using these two callback functions:

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

这篇关于如何使用jquery添加erroricon和自定义验证消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！