Question

是否可以在缺少字段旁边显示消息，而是设置css规则以更改字段的背景颜色？

我试着看了，对不起，我没有什么可以证明的（对于所有真正的铁杆SO用户有触发快乐的downvote手指），但我找不到任何东西。

我的表单非常紧张，如果出现该消息，那么抛出整个架构的结构。

博洛是我现在所拥有的。 Ant就像我说的那样工作，但我想用彩色替换消息。

验证规则

    var addStoreValidator; //scope - to reset form
    /* add new store to database */
    $('#addEditSave').click(function(){
        addStoreValidator = $("#storeEditFrm").validate({
            rules: {
                    "store_name": "required",
                    "street_name": "required",
                    "city_name": "required",
                    "province_name": "required",
                    "country_name": "required",
                    "phone": "required",
                    "store_email": {
                        required: true,
                        email: true
                    },
                    "ip_address": {
                        required: true,
                        ipv4: true
                    }
                },
                messages: {

                }
        });

如果表格有效：

        if ($("#storeEditFrm").valid()){
            $.ajax({
                type: "POST",
                url: './inc/storeScripts.php?argument=addStore',
                data: { name: $("#store_name").val(),
                        street: $("#street_name").val(),
                        suburb: $("#suburb_name").val(),
                        city: $("#city_name").val(),
                        province: $("#province_name").val(),
                        country: $("#country_name").val(),
                        phone: $("#phone").val(),
                        email: $("#store_email").val(),
                        fax: $("#fax").val(),
                        ip_address: $("#ip_address").val()
                },
                dataType: "json"
            })

Answer 1

不是验证员的专家，但您可以执行类似

的操作

input.myerror {
    border: 1px solid red;
}

然后

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

演示：Fiddle

Answer 2

是的，您可以使用invalidHandler更改并使用invalidHandler更新css (jquery validate options)：

$(".selector").validate({
    errorPlacement: function(error,element) {
        return true;
    },
    invalidHandler: function(event, validator) {
        $.each(errorList, function() {
            // update css value for element
        }
    }
});

Answer 3

根据我的经验，您可以使用类型的代码，但我喜欢在这种类型的“插件”中使用自定义JS类，这里遵循Magento社区中使用的类，它使用原型，但您可以轻松地更改为jQuery的。

https://github.com/magento/magento2/blob/master/lib/web/varien/form.js

希望它有所帮助，这个课程做得很好，你可以遵循它，你的工作将比你想象的更具可扩展性。

JQuery Validation插件调整

3 个答案: