Question

我是新来的，如果可能的话，我希望得到一些帮助。我有一个表单，我正在验证，但也想突出显示错误字段以及保持弹出窗口。我无法弄清楚出了什么问题？

这是在jsfiddle - http://jsfiddle.net/mKF5L/75/

$('form').validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        subject: {
            required: true,
            minlength: 10

        },
        comment: {
            required: true,
            minlength: 10,
            maxlength: 200
        }

    },

    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('bs.popover').options.content = value.message;

            $(value.element).popover('show');

        });
    }
});

有人可以告诉我，我做错了吗？

提前致谢

加里。

Answer 1

showErrors回调不是用于放置个别错误，而是用于创建错误摘要。

因此，您需要使用errorPlacement和success回调函数来控制工具提示。

这是使用Tooltipster插件的类似设置，只是为了给你一个想法。根据需要调整......

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                $(element).tooltipster('update', $(error).text());
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                $(element).tooltipster('hide');
            }
    });

});

DEMO：http://jsfiddle.net/kyK4G/

参考：https://stackoverflow.com/a/14741689/594235

文档：http://jqueryvalidation.org/validate

无法获得jquery突出显示以进行表单验证

1 个答案: