如何为绑定字段进行远程jquery验证?

时间:2016-03-01 13:58:21

标签: javascript jquery jquery-validate

我们说我有几个输入字段 - 它们的组合必须是唯一的。 它们中的每一个都会导致远程验证方法触发 - 并且它对于两个字段都是相同的方法。如果组合是唯一的 - 它返回true。 问题是:在验证错误之后我改变了字段,没有标记为错误,错误的字段一直被认为是错误的,即使方法返回true(这对夫妇是唯一的)!

我甚至不需要向服务器提出额外请求,因为这对夫妇是独一无二的!我只需要清除字段错误,标记为错误。但是,我还没有设法做到这一点 - 似乎jquery没有为此提供功能。

有什么想法吗?

相关代码非常庞大,但关键部分在这里:

this.clearErrors = function ($elements) {
    var $validator = $elements.first().closest('form').validate();
    $elements.each(function(index, item) {
        var $parent = $(item).parent();
        var element = $(item).get(0);
        if ($parent.is('td')) {
            $parent.removeClass(window.resources.errorCellClass);
        }
        $parent.find('span.' + window.resources.errorSpanClass).remove();
        $validator.successList.push(element);
        delete $validator.invalid[element.name];
        delete $validator.submitted[element.name];
    });
};

//Fixing remote method, since original one returned "pending" status all the time, as reported in other stackoverflow question
    $.validator.addMethod('synchronousRemote', function (value, element, param) {
        if (this.optional(element)) {
            return 'dependency-mismatch';
        }

        var previous = this.previousValue(element);
        if (!this.settings.messages[element.name]) {
            this.settings.messages[element.name] = {};
        }
        previous.originalMessage = this.settings.messages[element.name].remote;
        this.settings.messages[element.name].remote = previous.message;

        if (typeof param == 'string') {
            param = { url: param }
        }

        if (previous.old === value) {
            return previous.valid;
        }

        previous.old = value;
        var validator = this;
        this.startRequest(element);
        var data = {};
        data[element.name] = value;
        var valid = 'pending';
        $.ajax($.extend(true, {
            url: param,
            async: false,
            mode: 'abort',
            port: 'validate' + element.name,
            dataType: 'json',
            data: data,
            success: function (response) {
                validator.settings.messages[element.name].remote = previous.originalMessage;
                valid = response === true || response === 'true';
                if (valid) {
                    var submitted = validator.formSubmitted;
                    validator.prepareElement(element);
                    validator.formSubmitted = submitted;
                    validator.successList.push(element);
                    delete validator.invalid[element.name];
                    validator.showErrors();
                } else {
                    var errors = {};
                    var message = response || validator.defaultMessage(element, 'remote');
                    errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                    validator.invalid[element.name] = true;
                    validator.showErrors(errors);
                }
                previous.valid = valid;
                validator.stopRequest(element, valid);
            }
        }, param));
        return valid;
    });

    $root.filter(':input[data-excluded-values-method]:not([readonly])').add($root.find(':input[data-excluded-values-method]:not([readonly])')).each(function () {
        var $element = $(this);
        $element.validate({
            onkeyup: false
        })
        var $entityContainer = $element.closest('[data-entity]');
        var $keyFields = $entityContainer.filter('INPUT[data-is-key]:not([disabled])').add($entityContainer.find('INPUT[data-is-key]:not([disabled])'));
        var localizedNames = [];
        $keyFields.each(function () {
            localizedNames.push($(this).attr('localized-name'));
        });
        $element.rules('add',
        {
            synchronousRemote: function () {
                var key = [];
                var keyIsUnique = true;
                $keyFields.each(function () {
                    key.push($(this).val());
                });
                return {
                    url: $element.attr('data-excluded-values-method'),
                    type: 'POST',
                    async: false,
                    data: JSON.stringify({
                        key: key,
                        entityType: $entityContainer.attr('data-entity')
                    }),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    dataFilter: function (isUnique) {
                        keyIsUnique = isUnique;
                        return isUnique;
                    },
                    complete: function () {
                        if (keyIsUnique === 'true') {
                            window.commonUtils.clearErrors($keyFields.filter('[name!="' + $element.attr('name') + '"]:input[data-excluded-values-method]:not([readonly])'));
                        }
                    }
                }
            },
            messages: {
                synchronousRemote: $.validator.format(window.resources.notUniqueValidationError)(localizedNames.join(' + '))
            }
        });
    });

1 个答案:

答案 0 :(得分:1)

我已经调试了jquery validate方法,并找到了应该设置清除验证错误的内容:

$validator.previousValue(element).valid = true;

现在一切正常。