KnockoutJS仅在字段部分完成时验证

热点

寻找一种解决方案,仅在部分完成时才验证输入字段,即,如果用户未输入值,则不要验证。http://jsfiddle.net/2H2Bv/

当所有字段都满足其验证要求时,即当附加到每个输入的所有验证消息均已消失并且在单击提交按钮之前,删除顶部的验证摘要消息的解决方案“下面的完整缺少的字段”,也将很有用。 ...

的HTML

<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>

<!-- ko if: displayAlert -->
<p class="customMessage" data-bind="text: validationSummary"></p> <br />
<!-- /ko -->

<fieldset>
    <legend>Details</legend>
    <label>First name:
        <input data-bind='value: firstName' />
    </label>
    <label>Last name:
        <input data-bind='value: lastName' />
    </label>
    <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
        <label>Email:
            <input data-bind='value: emailAddress' required pattern="@" />
        </label>
</fieldset>
<br>
<button type="button" data-bind='click: submit'>Submit</button>
<br>
<br> <span data-bind='text: errors().length'></span> errors

JS:

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    decorateElement: true,
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

var viewModel =  function() {
    this.firstName = ko.observable().extend({
        minLength: 2,
        maxLength: 10
    });
    this.lastName = ko.observable().extend({
        required: true
    });
    this.emailAddress = ko.observable().extend({ // custom message
        required: {
            message: 'Enter your email address.'
        }
    });
    this.validationSummary = ko.observable("Complete missing fields below:");
    this.displayAlert = ko.observable(false);
    this.submit = function () {
        if (this.errors().length == 0) {
            alert('Thank you.');
        } else {
            this.displayAlert(true);
            this.errors.showAllMessages();
        }
    };
    this.errors = ko.validation.group(this);
};

ko.applyBindings(new viewModel());
亚历山德罗斯·B

如果我理解正确,那么您希望电子邮件验证在用户键入内容后运行,并且在页面加载时不会显示为“红色”。

为此,您需要删除requiredpattern属性,以便您的输入变为:

<input data-bind='value: emailAddress' />

并向模型添加电子邮件验证,以便您的观察结果变为:

this.emailAddress = ko.observable().extend({ // custom message
     required: {
          message: 'Enter your email address.'
     }, email:true
});

更新的小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

KnockoutJS仅在字段部分完成时验证

来自分类Dev

KnockoutJS:仅在绑定控件可见时验证模型的属性

来自分类Dev

我如何使用Rails仅在注册时验证某些字段

来自分类Dev

Symfony3仅在添加对象时验证字段

来自分类Dev

仅在更新时验证

来自分类Dev

仅在更新时验证

来自分类Dev

如何使parsleyjs仅在模糊时触发验证(对于已通过验证的字段)

来自分类Dev

Rails:仅在创建时或在字段不为空时更新时验证

来自分类Dev

验证器仅在重新编辑字段(包括PHP)时才接受提交

来自分类Dev

如何验证该字段大于仅在检查特定按钮时才有效

来自分类Dev

Laravel`lt'和'gt'验证规则仅在目标字段存在时

来自分类Dev

仅在异步方法完成时呈现页面

来自分类Dev

jQuery Validate插件-仅在其中一个字段不为空时验证

来自分类Dev

条件验证,即 仅在选中某个单选按钮时才需要一个字段?

来自分类Dev

R仅在列存在时验证数据

来自分类Dev

仅在使用 jQuery 验证时显示消息

来自分类Dev

Django临时字段仅在创建时

来自分类Dev

仅在某些字段大于0时加入

来自分类Dev

仅在字段的最短日期时返回结果

来自分类Dev

仅在提交或用户输入时验证表单字段

来自分类Dev

仅在完成前一个活动时引发事件

来自分类Dev

FlipView SelectionChanged事件仅在触摸操作完成时发生

来自分类Dev

不仅在开始时自动完成文本中间

来自分类Dev

灰烬-如何仅在save()完成时插入记录

来自分类Dev

仅在任务完成时出列项目

来自分类Dev

Select2 仅在完成时创建标签

来自分类Dev

如何使用闭包仅在加载数据时完成?(迅速)

来自分类Dev

Knockoutjs立即验证

来自分类Dev

如何使用KnockoutJS仅在下拉选择等于值时使输入可见

Related 相关文章

热门标签

归档