javascript - knockout 验证失败

Question

我有一个带有 string 属性、int 属性和两个其他模型列表的 knockout 模型。在 View 中，我尝试验证 knockout 对象中的属性，此时只需确保它们存在。

我正在使用 Knockout.Validation 库，使用扩展。

我遇到的问题是，当我单击按钮发送验证请求时，出现 JavaScript 错误self.isValid 不是函数

我在网上查了一下，似乎其他人也遇到了问题，只是他们的解决方案对我不起作用。

Javascript模型

编辑测试步骤

var StringParameterViewModel = function(data) {
    var self = this;

    if (data != null) {
        ko.mapping.fromJS(data, stringParameterMapping, self);
    } else {
        self.ParameterName = ko.observable().extend({
            required: {message: 'Please enter a parameter name.'}
        });
        self.StringValue = ko.observable().extend({
            required: { message: 'A value for the parameter is needed.' }
        });

    }
}

var XmlParameterViewModel = function (data) {
    var self = this;

    if (data != null) {

        ko.mapping.fromJS(data, xmlParameterMapping, self);
    } else {
        self.ParameterName = ko.observable().extend({
            required: true
        });
        self.XmlValue = ko.observable().extend({
            required: true
        });
    }
}

var xmlParameterMapping = {
    craete: function(options) {
        return XmlParameterViewModel(options.data);
    }
}


var stringParameterMapping = {
    create: function(options) {
        return StringParameterViewModel(options.data);
    }
}

var editTestStepMapping = {
    create: function(options) {
        return EditTestStepViewModel(options.data);
    }
}

var EditTestStepViewModel = function(data) {
    var self = this;
    if (data != null) {
        ko.mapping.fromJS(data, {}, self);

    } else {
        self.StringParameters = ko.observableArray();
        self.XmlParameters = ko.observableArray();
        self.TestStepName = ko.observable().extend({
            required: true
        });
    }

    self.saveTestStep = function() {
        var dataToSend = ko.mapping.toJSON(self);
        $.ajax({
            url: "/Home/SaveEdit/",
            type: "POST",
            contentType: "application/json",
            data: dataToSend
        });
    };

    self.Errors = ko.validation.group(self);

    self.checkValid = function () {
        if (self.isValid()) {
            alert('All ok!');
        } else {
            self.Errors.showAllMessages();
        }
    }


}


var validationOptions = {
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'errorCSS',
    messagesOnModified: true,
    debug: true,
    grouping: {
        deep: true,
        observable: false //Needed so added objects AFTER the initial setup get included
    }
};

ko.validation.init(validationOptions, true);

查看

@using System.Web.Script.Serialization
@model MvcNewPatternsDemo.Models.EditTestStepViewModel


@{ string data = new JavaScriptSerializer().Serialize(Model);}

@{
    ViewBag.Title = "Home Page";
}
@section scripts{


    <script src="~/Scripts/knockout-3.4.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/EditTestStep.js"></script>
    <script type="text/javascript">
        var editTestStepViewModel = new EditTestStepViewModel(@Html.Raw(data));
        ko.applyBindingsWithValidation(editTestStepViewModel);
    </script>
    }

<form>

    <input class="form-control" name="ParameterName" data-bind="value: TestStepName"/>
    <input class="form-control" name="TestStepId" data-bind="value: TestStepId"/>

    <table class="table table-striped">
        <tr>
            <th>StringParameters</th>
        </tr>

        <tbody data-bind="foreach: StringParameters">
        <tr>
            <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName"/></td>
            <td class="form-group"> <input name="StringValue" class="form-control input-sm" data-bind="value: StringValue"/></td>
        </tr>
        </tbody>

    </table>

    <table class="table table-striped">
        <tr>
            <th>XmlPara</th>
        </tr>

        <tbody data-bind="foreach: XmlParameters">
            <tr>
                <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName" /></td>
                <td class="form-group"> <input name="XmlValue" class="form-control input-sm" data-bind="value: XmlValue" /></td>
            </tr>
        </tbody>

    </table>


</form>




<div class="row">
    <button data-bind="click: saveTestStep" type="submit">Save Test Step</button>
    <button data-bind="click: checkValid"type="button">Check Valid</button>
</div>

模型

namespace MvcNewPatternsDemo.Models
{



    public class TestStepDisplayModel
    {
        public int TestStepId { get; set; }
        public string TestStepName { get; set; }

    }

    public class StringParameterViewModel
    {
        public string ParameterName { get; set; }
        public string StringValue { get; set; }
    }

    public class XmlParameterViewModel
    {
        public string ParameterName { get; set; }
        public string XmlValue { get; set; }
    }


    [Serializable]
    public class EditTestStepViewModel
    {
        public string TestStepName { get; set; }
        public int TestStepId { get; set; }
        public List<StringParameterViewModel> StringParameters { get; set; }
        public List<XmlParameterViewModel> XmlParameters { get; set; }

        public EditTestStepViewModel()
        {
            this.StringParameters = new List<StringParameterViewModel>();
            this.XmlParameters = new List<XmlParameterViewModel>();
        }

    }

}

对 Controller 的 ajax 调用有效，并且正在发送对象中的所有数据，我只需要验证即可运行。

Answer 1

我在您的 javascript 中没有看到您注册扩展程序的行。

尝试在末尾添加此内容:

ko.validation.registerExtenders();