Question

我正在使用the jQuery Validate plugin并且我有这个代码来捕获错误并将类（ myerror ）应用于导致验证失败的字段。

我想扩展它以捕获捕获的错误类型。

示例1：如果您没有填写该字段。 Class1已应用（css background-color：lightRed）

示例2：字段中的数据格式错误。 Class2应用（css background-color：lightBlue）

jQuery(function ($) {
    var validator = $('#form').validate({
        rules: {
            ip: {
                  required: true,
                  ipv4: true
            }
        },
        messages: {},
        errorPlacement: function (error, element) {},
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('myerror')
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('myerror')
        }
    }); 
 });

Answer 1

事实证明你可以......（排序）这样做。

我在验证中使用$(element).val();来确定该字段是否为空。

如果该字段为空白，那么它就丢失了。
如果该字段已归档但触发了验证，则必须将其格式化为错误。

所以我使用了一个气泡类来在一个单独的div元素中显示错误。不像传统的内联错误消息。

这种疯狂的原因＆＃39;是因为html表单很小，如果你允许错误信息显示为内联，它会将糟糕的html表单拉到位。我觉得这样做有更多的控制权。

确认代码

            var validator = $("#storeEditFrm").validate({
                    rules: {
                        "store_name": "required",
                        "street_name": "required",
                        "suburb_name": "required",
                        "city_name": "required",
                        "country_name": "required",
                        "phone": "required",
                        "store_email": {
                            required: true,
                            email: true
                        },
                        "ip_address": {
                            required: true,
                            ipv4: true
                        }
                    },
                    messages: {},
                    errorPlacement: function(error, element) {},
                    highlight: function (element, errorClass, validClass) {

                        $(element).prev().prev().addClass('bubble');
                        var v = $(element).val();
                        if(v == ''){$(element).prev().prev().html('Required field')}
                        if(v != ''){$(element).prev().prev().html('Please check format')}
                    },
                    unhighlight: function (element, errorClass, validClass) {
                        $(element).prev().prev().removeClass('bubble');
                    }
            });

这是一个小提琴，需要一些CSS工作，但你明白了。

FIDDLE

如何捕获验证错误的类型？

1 个答案: