标签: knockout-validation

带油门的敲门验证

我刚刚注意到使用节流扩展器会导致Knockout Validation停止工作.有没有解决这个问题的方法?

var viewModel = {
    label1: ko.observable('label1').extend({required: true}),
    label2: ko.observable('label2').extend({required: true, throttle: 1}),
};

ko.applyBindings(viewModel);
Run Code Online (Sandbox Code Playgroud)

jsFiddle:http://jsfiddle.net/rWqkC/

knockout.js knockout-validation

4
推荐指数
1
解决办法
921
查看次数

errors()中的第一项是[null]

我有以下代码:

function JobTask() {
    var self = this;

    self.description = ko.observable('').extend({
        required: true
    });
    self.priority = ko.observable('').extend({
        number: true,
        required: true
    });
    self.complete = ko.observable(false);
}

function CreateJobViewModel() {
    var self = this;

    self.task = ko.observable(new JobTask());

    self.taskErrors = ko.validation.group(self.task);
    self.addTask = function () {

        if (self.taskErrors().length) {
            console.log(self.taskErrors());
            self.taskErrors.showAllMessages();
        }
        else {
            ...
        }
    };
}
Run Code Online (Sandbox Code Playgroud)

问题是,当我添加任务时,即使我正确输入了字段,它也会因某些原因无效.控制台输出[null].经过进一步调查,似乎即使我没有正确输入我的字段,我的taskErrors数组中的第一项始终是[null].所以看起来像:[null], "This field is required.".不知道我做错了什么?

编辑

这是我创建的问题的小提琴:http://jsfiddle.net/5kh6h/1/

knockout.js knockout-validation

4
推荐指数
1
解决办法
1062
查看次数

具有验证的Knockout-JS多步骤表单

在这里寻找理智的检查.我最近开始学习淘汰赛,并已被指示转换现有的多步骤表格.

基本思想是在允许用户继续之前验证每个步骤.还设置了某些限制(未显示),用于确定是继续向前还是使用所有当前数据提交(例如:如果他们不符合条件).

这是一个简化版本的小提琴(实际形式包含4个步骤约40个字段)

http://jsfiddle.net/dyngomite/BZcNg/

HTML:

<form id="register">
 <fieldset>
      <h2>About You</h2>
    <ul>
        <li>
            <label for="firstName">First Name:</label>
            <input type="text" data-bind="value: firstName" required="required" />
        </li>
        <li>
            <label for="lastName">Last Name</label>
            <input type="text" data-bind="value: lastName" required="required" />
        </li>
    </ul>
 </fieldset>
 <fieldset>
     <h2>Your Business</h2>

    <ul>
        <li>
            <label for="businessName">Business Name:</label>
            <input type="text" data-bind="value: businessName" required="required" />
        </li>
        <li>
            <label for="currentCustomer">Were you referred by someone?</label>
            <input type="checkbox" data-bind="checked: referred" />
        </li>
    </ul>
</fieldset>
<fieldset>
     <h2>User Info</h2>

    <ul>
        <li>
            <label for="userName">Referrer's First Name:</label>
            <input type="text" data-bind="value: referralFirst" required="required" /> …
Run Code Online (Sandbox Code Playgroud)

knockout-2.0 knockout.js knockout-validation

4
推荐指数
1
解决办法
5297
查看次数

使用Knockout验证插件时,Knockout ViewModel isValid错误

我是新手使用淘汰赛,我正在尝试使用淘汰验证插件和映射插件.我在视图模型对象上遇到了isValid函数的问题.根据文档,isValid应该返回一个bool来确定视图模型上的任何可观察对象是否有效但是当我调用它时我得到一个错误,说isValid不是一个函数.但是,如果我在observables上调用isValid它可以正常工作.问题是我正在使用映射插件和我从服务器获得的一些动态数据对象,因此我不一定知道我需要验证的observable的名称,因此单独验证它们是不可行的.以下示例已经过简化,但在实际实现中,我不知道可观察对象的名称.也许我刚刚错过了一些文档?

谢谢你的时间.

这确实有效

    var dataItem = { FirstName: '', LastName: '', Age: '', Email: '' }


    var viewModel = function(data) {

        var self = this;
        this.Email = ko.observable().extend({ email: true });
        this.LastName = ko.observable().extend({ required: true });
        this.Age = ko.observable().extend({ required: true, min: 0 });
        this.saveClick = function () {

            if (!self.Email.isValid() || !self.Age.isValid() || !self.LastName.isValid()) {
                alert('Not valid');
            else {

                alert('Valid');
            }
        };
        this.cancelClick = function () {

            ko.mapping.fromJS(dataItem, null, this);
        }

        ko.mapping.fromJS(data, {}, this);
    };

    var viewModelInstance = …
Run Code Online (Sandbox Code Playgroud)

jquery knockout-mapping-plugin knockout.js knockout-validation

4
推荐指数
1
解决办法
1万
查看次数

如何在敲除验证中验证模型

我创建了一个视图模型,并希望使用敲除验证来验证该模型.这是我的视图模型

function SignInViewModel() {
   var self = this;

   self.userName = ko.observable('').extend({
      required: true,
      pattern: {
         message: 'Username must be a valid email address',
         params: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      }
   });

   self.password = ko.observable('').extend({
      required: true,
      pattern: {
         message: 'Password must be alpha numeric and 4-8 character long .',
         params: /^(?=.*\d).{4,8}$/
     }
   });

   self.login = function () {
      // Want to call validate function here
      $.post("/account/login", { "userName": self.userName(), "password": self.password() })
         .done(function (result) {
            redirect(result.redirect);
     });
    }
}

ko.validation.configure({
   decorateElement: false,
   errorElementClass: "error", …
Run Code Online (Sandbox Code Playgroud)

knockout-2.0 knockout.js knockout-validation

4
推荐指数
1
解决办法
3856
查看次数

无法配置淘汰验证

我正在尝试配置淘汰赛验证,但我的设置似乎被忽略了.这就是我试图配置它的方式

var knockoutValidationSettings = {
    insertMessages: true,
    decorateElement: true,
    errorMessageClass: 'error',
    errorElementClass: 'error',
    errorClass: 'error',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true,
    decorateInputElement: true
};
ko.validation.init(knockoutValidationSettings);

ko.applyBindings(vm, $('#dropzone')[0]);
Run Code Online (Sandbox Code Playgroud)

我知道选项对象不是问题,因为这很好用

var knockoutValidationSettings = {
    insertMessages: true,
    decorateElement: true,
    errorMessageClass: 'error',
    errorElementClass: 'error',
    errorClass: 'error',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true,
    decorateInputElement: true
};
//ko.validation.init(knockoutValidationSettings);

ko.applyBindingsWithValidation(vm, $('#dropzone')[0], knockoutValidationSettings);
Run Code Online (Sandbox Code Playgroud)

如何让init函数工作?显然,我想把这个初始化移到我应用程序根目录的一个地方.

javascript knockout.js knockout-validation

4
推荐指数
1
解决办法
4955
查看次数

minLength Knockout验证的自定义错误消息

我正在使用淘汰赛验证.我想显示最小和最大长度的自定义消息.我尝试了一些选项而且我无法实现它.如果有人已经实现它,请分享我如何做到这一点.

这就是我现在正在尝试的.

var viewModel = {
    firstName: ko.observable().extend({
        minLength: [
            3,
             'Please enter Valid number']

        , maxLength: 10
    }),
}
Run Code Online (Sandbox Code Playgroud)

我是否必须真正选择RegEx.

range knockout.js knockout-validation

4
推荐指数
1
解决办法
5312
查看次数

Knockout Validation不使用DatePicker bindingHandler

所以我使用Knockout Validation来验证我的viewmodel和一个自定义的knockout datepicker bindingHandler来附加一个jQuery-UI datepicker来动态添加我的observableArray中的项目.

看来我的bindingHandler正在破坏或破坏该领域的验证规则.似乎没有强制执行开始日期或结束日期的验证规则.

我的代码的JSFiddle链接

HTML代码:

<form>
    <a class="btn btn-default" data-bind="click: function () { $root.addMed(); }">Add New Medication</a>

    <h6 data-bind="visible: patientMeds().length < 1">No medications entered.</h6>

    <table class="table table-condensed" data-bind="visible: patientMeds().length > 0">
        <thead>
            <tr>
                <th>Med</th>
                <th>From</th>
                <th>To</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: patientMeds">
            <tr>
                <td>
                    <input class="form-control" data-bind="value: MedicationID" />
                </td>
                <td>
                    <input class="form-control" data-bind="datepicker: StartDate, datepickerOptions: { changeMonth: true, changeYear: true, showButtonPanel: true }" />
                </td>
                <td>
                    <input class="form-control" data-bind="datepicker: DiscontinuedDate, datepickerOptions: { changeMonth: true, …
Run Code Online (Sandbox Code Playgroud)

javascript jquery-ui knockout-2.0 knockout.js knockout-validation

4
推荐指数
1
解决办法
2270
查看次数

如果排除validationElement绑定,则敲除验证不会添加hasError类

我已经为我的模型添加了敲除验证.

这很好用:

//init validation
ko.validation.init({
    registerExtenders: true,
    insertMessages: false,
    messagesOnModified: false,
    decorateElement: true,
    errorElementClass: 'hasError'
});

// has required validation for model observable
self.CompanyName= ko.observable(data ? ko.unwrap(data.CompanyName) : '').extend({ required: true });
Run Code Online (Sandbox Code Playgroud)

HTML

//binding
<span class="inline-edit-view" data-bind="text: CompanyName, validationElement: CompanyName"></span>
Run Code Online (Sandbox Code Playgroud)

这会增加hasError无效元素.validationElement但是,如果我删除它,它不起作用.

问题是:我为什么要使用validationElement?这对我来说似乎是违反直觉的.
我已经拥有extend {required: written}每个元素,我不想validationElement为每个observable 编写一个绑定.

validation knockout.js knockout-validation

3
推荐指数
1
解决办法
2698
查看次数

淘汰验证 - 自定义验证器未显示消息

我在我的viewmodel中有布尔属性,每个都绑定到一个复选框.我正在尝试编写一个自定义的淘汰验证器,确保至少选中一个复选框.我已经编写并连接了验证器(即当复选框发生更改时触发,并且仅在未选中复选框时返回false),但验证消息未显示.

首先,这是一个小提琴:http://jsfiddle.net/internetH3ro/aRS4a/10/

这是验证器:

ko.validation.rules['requiresOneOf'] = {
    getValue: function (o) {
        return (typeof o === 'function' ? o() : o);
    },
    validator: function (val, fields) {
        var self = this;
        var result = true;
        ko.utils.arrayForEach(fields, function (field) {
            var val = self.getValue(field);
            if (val) {
                result = false;
            }
        });

        return result;
    },
    message: 'Must select one option'
};
ko.validation.registerExtenders();
Run Code Online (Sandbox Code Playgroud)

这是视图模型(名称已更改以保护无辜者):

function ViewModel() {
    var self = this;
    self.checkboxOne = ko.observable(true);
    self.checkboxTwo = ko.observable(true);
    self.checkboxThree = ko.observable(true);
    self.checkboxFour …
Run Code Online (Sandbox Code Playgroud)

knockout.js knockout-validation

3
推荐指数
1
解决办法
2963
查看次数