当值通过javascript更改时,元素未更新错误状态
我有一个页面,里面有一些敲除,我正试图在其中实现验证。我有一个输入,我允许用户通过如下下拉菜单进行更改:当值通过javascript更改时,元素未更新错误状态,javascript,jquery,asp.net-mvc,knockout.js,Javascript,Jquery,Asp.net Mvc,Knockout.js,我有一个页面,里面有一些敲除,我正试图在其中实现验证。我有一个输入,我允许用户通过如下下拉菜单进行更改: <div class="col-md-6 form-group has-feedback" data-bind="css: { 'has-error': Term.hasError }"> <label for="ddlTerm" class="col-form-label" style="padding: 0;">Term</label>
<div class="col-md-6 form-group has-feedback" data-bind="css: { 'has-error': Term.hasError }">
<label for="ddlTerm" class="col-form-label" style="padding: 0;">Term</label>
<div class="input-group input-group-sm">
<input type="text" data-bind="textInput: Term" class="form-control input-sm" id="tbTerm" />
<div class="input-group-btn">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:set_Term(12)">12 Months</a></li>
<li><a href="javascript:set_Term(24)">24 Months</a></li>
<li><a href="javascript:set_Term(36)">36 Months</a></li>
<li><a href="javascript:set_Term(48)">48 Months</a></li>
<li><a href="javascript:set_Term(60)">60 Months</a></li>
<li><a href="javascript:set_Term(72)">72 Months</a></li>
<li><a href="javascript:set_Term(84)">84 Months</a></li>
</ul>
</div>
</div>
<span data-bind='visible: Term.hasError, text: Term.validationMessage' class="help-block"></span>
</div>
该值与以下各项相关:
self.Term = ko.observable('').extend({ required: 'Term is required' });
当值发生变化时,可观测值会更新,但错误状态保持不变,输入保持红色,反馈保持可见。有没有办法强迫输入意识到它的值已经改变,并且应该清除错误
我已经尝试给元素focus()
,但是没有用
我发现的唯一一件事是给出包含div和验证消息id,然后在JS函数中执行此操作:
$('#tbTermDiv').removeClass('has-error');
$('#tbTermNote').addClass('hidden');
这在视觉上起到了作用-错误消息消失,文本框丢失红色,但如果用户再次清空文本框,红色会返回,但消息保持隐藏。。。所以这不是最好的解决方案
我对任何一种解决方案都很满意:击倒、jQuery、纯JS
编辑:我注意到这不会更新可观察的对象,所以当我通过value属性更改输入时,它不会更新可观察的对象 扩展器的工作方式与一般工程中的击倒方式相同。它只知道对视图模型上的可观察对象所做的更改。使用jquery更新UI上控件的值不会更新基础视图模型,因此任何依赖的淘汰代码都不知道如何更新 您可以将set_term函数更改为视图模型上的函数,并让它更新基础的observable而不是控件。然后使用数据绑定来调用函数,而不是原始js
self.set_Term = function(months) {
self.Term(months);
};
是什么导致您的验证出现的?您目前使用的验证库是什么?@JasonSpake我使用的是这里的示例:@JasonSpake我也安装了Eric Barnard的knockout.validation v2.0.3,但我不确定我的设置是否使用了它。我看不出您的配置有任何问题。我使用您的代码和knockout示例中的“必需”扩展器创建了一个快速复制程序。它似乎工作正常?只是在使用了一个集合项函数之后才有问题吗?哦,这里还有更多的问题。这是一个自举下拉列表吗?我曾经想过这种方法,但是因为它已经按照原来的方式设置好了,所以我想找到一种按原样操作的方法。我找到了一个简单的方法,我只是添加了
$('tbTerm').trigger('change')代码>到“set_term”函数,现在它知道输入已更改,因此它更新了可观测值,错误清除。谢谢你的帮助。这个答案是完全可以接受的,但我现在将使用jQuery。
self.set_Term = function(months) {
self.Term(months);
};
<li><a data-bind="click: function(){set_Term(84)}">84 Months</a></li>