在淘汰赛必填字段验证中显示图标而不是错误消息答案

【问题标题】：Show icon instead of error message in knockout required field validation在淘汰赛必填字段验证中显示图标而不是错误消息
【发布时间】：2016-04-05 18:45:13
【问题描述】：

<input type="text" data-bind="value:Firstname" />
<i class="fa fa-exclamation-circle"></i>
<i class="fa fa-check-circle"></i>
<input type="text" data-bind="value:Lastname" />
<i class="fa fa-exclamation-circle"></i>
<i class="fa fa-check-circle"></i> 
<button type="button" data-bind="click: submit">Submit</button>

需要显示每个文本框的图标，而不是在单击提交按钮本身时显示所需的消息。

续：用于所需验证的 fa-exclamation-circle 图标样式 fa-check-circle icon style for valid

我对淘汰赛很陌生，所以请告诉我如何进行这种验证。

【问题讨论】：

您使用什么进行验证？ jQuery 验证？ ko.validation ?还是你自己的验证？
我正在使用 ko 验证

标签： validation knockout.js

【解决方案1】：

您可以使用自定义模板来做同样的事情。为相同的http://jsfiddle.net/nuDJ3/246/创建了一个小提琴

HTML

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <br />
    <input data-bind="value: lastName" />
</div>
<script type="text/html" id="myCustomTemplate">
    <span data-bind="if: field.isModified() && !field.isValid(), attr: { title: field.error }"><i class="fa fa-exclamation-circle"></i></span>
    <span data-bind="if: field.isModified() &&  field.isValid(), attr: { title: field.error }"><i class="fa fa-check-circle"></i></span>
</script>

视图模型

var ViewModel = function () {
    var self = this;
    self.firstName = ko.observable().extend({ required: { message: "firstName" }});
    self.lastName = ko.observable().extend({ required: { message: "lastName" }});  
}

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

// modify the values to trigger validation
viewModel.firstName('');
viewModel.lastName('');

它对我来说很好用。

【讨论】：

感谢您的回复，我遵循相同的模式工作正常

【解决方案2】：

你可以简单地使用 ko if 绑定： http://knockoutjs.com/documentation/if-binding.html

基本上，如果您想运行绑定时应该采用的逻辑

<input type="text" data-bind="value:Firstname" />
<!--ko if: validationIstrue-->
<i class="fa fa-exclamation-circle"></i>
<!--/ko -->
<!--ko ifnot: validationIstrue-->
<i class="fa fa-check-circle"></i>
<!--/ko-->

<button type="button" data-bind="click: submit">Submit</button>

或者你可以为 js 编写一个验证帮助类，组件的工作方式。

http://knockoutjs.com/documentation/component-overview.html

【讨论】：