Validation 在需要淘汰的字段验证中显示图标而不是错误消息 提交

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

续： fa感叹号圆圈图标样式，用于所需验证 fa检查圆图标样式是否有效

---

我对敲除非常陌生，所以请告诉我如何进行此类验证。

只需使用ko，如果绑定：

基本上，如果你想运行逻辑，你应该在if绑定

<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>

提交

或者您可以为js编写一个验证帮助器类，组件的工作方式如下

---

您可以使用自定义模板执行相同的操作。为同样的东西做了一把小提琴

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>

---

这对我来说很好。

你用什么来验证？JQuery验证？柯林斯：验证？还是你自己的验证？我正在使用ko validation感谢你的回复我遵循了相同的模式工作良好

<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('');