Question

我在表单中有一组文本编辑器，通过敲除验证来验证它们。当我提交表单时，只有少数表单显示验证错误，尽管所有表单都应该通过。这个问题只发生在错误显示的这两个字段中，但是我已经检查并仔细检查了所有这些的所有接线都是正确设置的，例如，没有理由我可以看到这两个字段应该与不显示此问题的其他字段不同。

我希望那些在淘汰验证内部比我更有经验的人可能会指出一些可能会交替绊倒这些验证的东西。我将其设置为在用户点击编辑器外部时验证文本，并且工作正常。以下问题仅在用户单击“提交”时显示，并且页面上的其他字段（此处显示的编辑器除外）存在问题。换句话说，如果每个字段都有效，则提交表单。如果除下面显示的字段以外的任何字段存在问题，则会显示误报。

添加代码示例：创建验证器并扩展可观察量。请注意，图像中描述的配置与未标记为无效的配置相同：

ko.validation.rules['notIn'] = {
    validator: function (value, params) {
        var thisValidator = baseCompare.slice();
        if (Array.isArray(params))
            params.forEach(function (element, index, array) {
                thisValidator.push(element);
            });
        else
            thisValidator.push(params);
        return thisValidator.indexOf(value) == -1;
    },
    message: 'Please enter a unique value'
};

ko.validation.registerExtenders();
self.setupValidation = function () {
    self.title.extend({
        required: true,
        notIn: {
            message: 'Please enter a unique title',
            params: self.froalaBasify('New Change Request')
        }
    });
    self.domain.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
    self.priority.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
    self.securityClassification.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
    self.impact.extend({ required: true, notEqual: '0' }).extend({ notify: 'always' });
    self.customersAffected.extend({
        required: true,
        notIn: {
            message: 'Please describe the customers affected',
            params: self.froalaBasify(CRHelper.ValidationPlaceholders.customersAffected)
        }
    });
//False Positive
    self.justification.extend({
        required: true,
        notIn: {
            message: 'Please provide a justification for the request',
            params: self.froalaBasify(CRHelper.ValidationPlaceholders.justification)
        }
    });

    self.scope.extend({
        required: true,
        notIn: {
            message: 'Please describe the systems affected by this change',
            params: self.froalaBasify(CRHelper.ValidationPlaceholders.scope)
        }
    });
//False Positive
    self.validationProcess.extend({
        required: true,
        notIn: {
            message: 'Please enter a validation plan for this change',
            params: self.froalaBasify(CRHelper.ValidationPlaceholders.validationProcess)
        }
    });
    self.description.extend({
        required: true,
        notIn: {
            message: 'Please enter a description',
            params: self.froalaBasify(CRHelper.ValidationPlaceholders.description)
        }
    });
    self.deadlineRequested.extend({
        required: true,
        dateGreaterThanToday: {
            onlyIf: function () {
                //var isTrue = $('#ddTransition option:selected').text() == "Delete Request";
                //return !(isTrue);
                return self.id === 0;
            }
        }
    });
    //self.deadlineRequested.extend({
    //    required: true}).extend({ notify: 'always' });

};

接下来是提交处理程序：

self.submitChangeRequest = function () {
    var validated = ko.validatedObservable(self.ChangeRequest());
    var transition = "";
    transition = $('#ddTransition option:selected').text();

    var disableValidation = false;
    if (transition == "Delete Request")
        disableValidation = true;
    var formIsValid = validated.isValid();
    if (CRHelper.ConfirmSubmitIfDeleteChosen() && (disableValidation || formIsValid)) {
        $('.submitter').prop('disabled', true);
        var formUsage = $("[id*='hdnFormUsage']")[0].value;
        var ajax = new utils.AjaxFormatter(
            {
                type: "POST",
                data: ko.toJSON(self.ChangeRequest()),
                url: DomainUtil.baseUrl + "api/ChangeRequests/",
                contentType: "application/json",
                headers: { 'formUsage': formUsage }
            },
            function (updatedModel, status, request) {
                var updateMessage = formUsage == 'execute' ? 'executed' : (formUsage == 'new' ? 'saved new' : transition == 'Delete Request' ? 'deleted' : 'updated');
                var $msg = $("[id*='StatusMessage']");
                $msg.html('Successfully ' + updateMessage + ' Change Request ' + updatedModel.id);
                $msg.addClass('alertGo').show().fadeOut({ duration: 8000, easing: 'easeInQuint', complete: function () { $msg.removeClass('alertGo'); } });


                if (formUsage == 'new') {
                    changeRequestViewModel.SetChangeRequest(new ChangeRequestModel());
                    CRHelper.SetEditors('new');
                } else {
                    changeRequestViewModel.SetChangeRequest(new ChangeRequestModel(updatedModel));
                    CRHelper.SetEditors('edit');
                }
                if ((formUsage == 'editState' || formUsage == 'edit') && updatedModel.activeStateId === 8)
                    $('#approvedByItems').toggle();
                if (formUsage === 'execute' || (formUsage === 'editState' && updatedModel.activeStateName == 'Approved')) {
                    $('#divExecuted').toggle();
                    $('#divChangeState').hide();
                }
                try {
                    $('#dtpDeadlineRequested').datepicker();
                    $('#dtpDeadlineRequested').datepicker('refresh');

                } catch (e) {
                    $('#dtpDeadlineRequested').datepicker('destroy');
                    $('#dtpDeadlineRequested').datepicker();

                }
                if (transition == "Delete Request") {
                    $('.submitter').prop('disabled', true);
                    $('#divSubmitButtons #buttonSet').toggle();
                    $('#divSubmitButtons #returnLink').toggle();
                    $('#formFields').prop('disabled', true);
                }
                if (updatedModel.activeStateName == 'Executed' || updatedModel.activeStateName == 'Deleted' || updatedModel.activeStateName == 'Approved') {
                    $('#formFields').prop('disabled', true);
                    $('.editor').unbind('dblclick');
                    $('#divSubmitButtons #buttonSet').toggle();
                    $('#divSubmitButtons #returnLink').toggle();
                }
            },
            function (request, status, error) {
                //update message text
                var $msg = $("[id*='StatusMessage']");
                var updateMessage = formUsage == 'execute' ? 'executing' : (formUsage == 'new' ? 'saving' : 'updating');
                $msg.html('Failure ' + updateMessage + ': ' + error);
                $msg.addClass('alertStop').show().fadeOut({ duration: 8000, easing: 'easeInQuint', complete: function () { $msg.removeClass('alertStop'); } });
            },
            function () {
                if (pwChooser)
                    pwChooser.selectedPW([]);

                //hide spinny
            }
        );
        utils.tokenizedAjax(ajax);

    } else {
        ko.validation.group(self.ChangeRequest()).showAllMessages();
        var $msg = $("[id*='StatusMessage']");

        $msg.html('Check your entries and try again')
            .addClass('alertCaution')
            .show()
            .fadeOut({
                duration: 2000,
                easing: 'easeInQuint',
                complete: function () {
                    $msg.removeClass('alertCaution');
                }
            });

    }
}

然后我在这里宣布模型上的observable - 非常简单：

self.description = ko.observable(crData.description || '');
self.domain = ko.observable(crData.domain || '');
self.id = crData.id || 0;
self.impact = ko.observable(crData.impact || '');
self.includesPolicyWaiver = ko.observable(crData.includesPolicyWaiver || false);
self.justification = ko.observable(crData.justification || '');
self.priority = ko.observable(crData.priority || '');
self.scope = ko.observable(crData.scope || '');
self.securityClassification = ko.observable(crData.securityClassification || '');
self.title = ko.observable(crData.title || 'New Change Request');
self.validationProcess = ko.observable(crData.validationProcess || '');

我已经对代码进行了三重检查，并且没有其他地方可以明确更改这两个表单字段背后的值。这看起来像全局类型的值正在切换然后没有重置或其他东西。

这很有趣：我做的唯一更改是html中元素的顺序。进行相同的测试/提交，现在位于第2和第4位的其他字段显示误报。显示它的那些最初按预期验证。

Knockout验证验证出错

0 个答案: