Question

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

Need to show the icon for each textbox instead of showing required message while clicking the submit button itself.

contd: fa-exclamation-circle icon style for required validation fa-check-circle icon style for valid

Im very new to knockout so please tell me know how to do this kind of validation.

Answer 1

Simply you can use the ko if binding : http://knockoutjs.com/documentation/if-binding.html

Basicly if you want run the logic you should take in if binding

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

or you can write a validation helper class for js, components works as.

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

Answer 2

您可以使用自定义模板执行相同操作。为同一个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('');

它对我来说很好。

Show icon instead of error message in knockout required field validation

2 个答案: