使用映射对动态表单进行淘汰赛验证

Question

我从几天以来一直在尝试对动态表单进行验证，但我无法得到它。 非常感谢您的帮助。

我需要使用从 Web 服务接收到的信息来扩展 ViewModel 的属性。 我试图个性化映射，但在复选框的情况下，从数组的每个值输入一次。此外，在单选框和复选框的情况下，只需在第一个中应用所需的属性，仅在验证消息中出现一次。

var answerMapping = {
    "values": {
        create: function(options) {                    
            var answer = ko.observable(options.data);                        
            answer.extend({
                required: {
                    onlyIf: function () { return (options.parent.required() === true); }
                }
            });     
            return answer;
        }
    },  
    "value": {
        create: function(options) {                    
            var answer = ko.observable(options.data);                        
            answer.extend({
                required: {
                    onlyIf: function () { return (options.parent.required() === true); }
                }
            });     
            if (options.parent.type() === 3) {
                answer.extend({ number: true, min: options.parent.min, max: options.parent.max });
            }
            if (options.parent.type() === 4) {
                answer.extend({ dateISO: true });
            }
            return answer;
        }
    }
};

您可以在自定义映射之前在 jsfiddle 中查看示例： jsfiddle

Answer 1

你的小提琴有几个问题。

主要问题是 required 验证器不能像这样用于可观察数组（它似乎只检查内容是否为空，而不检查数组是否为空）。

您可以改用这个自定义验证器：

ko.validation.rules['requiredNonEmpty'] = {
    validator: function (val, other) {
        console.log(val);
        return val !== null && val.length > 0;
    },
    message: "Required non empty"
}
ko.validation.registerExtenders();

其他问题包括：

• values 声明为 observable 而不是 observableArray
• 缺少一些括号（对于min 和max）
• 分组不深 (myVM.errors = ko.validation.group(myVM, {deep: true});)

如果要显示values observableArray 的消息，请添加以下内容：

<span data-bind="validationMessage: values"></span>

更新

你是对的。问题是values: { create: function(options) {} } 会为values: ["A1", "A2"] 中的每个值调用，而不是为整个数组调用。

您必须在映射后添加验证:(

像这样：

self.load = function (data) {
    ko.mapping.fromJSON(data, answerMapping, self);
    for (var i = 0; i < self.questions().length; i++) {
        var question = self.questions()[i];
        if (ko.isObservable(question.values) 
            && question.values() instanceof Array) {
            question.values.extend({
                requiredNonEmpty: {
                    onlyIf: function () { return (question.required()=== true); }
                }
            });
        }
    }
};

并删除映射中的values 部分。

Updated fiddle