通過javascript更改值時元素未更新錯誤狀態

Question

我有一個要在其中進行剔除的頁面，試圖在其中進行驗證。我有一個輸入，允許用戶通過下拉菜單進行更改，如下所示：

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

和JavaScript函數：

function set_Term(months) {
    var termInput = document.getElementById("tbTerm");
    termInput.value = months;           
};

該值綁定到：

self.Term = ko.observable('').extend({ required: 'Term is required' });

當值更改時，可觀察值將更新，但錯誤狀態保持不變，輸入保持紅色，並且反饋保持可見。 有沒有一種方法可以強制輸入意識到其值已更改，並且應該清除錯誤？

我試圖給元素focus() ，但這是行不通的。

我發現的唯一一件事就是提供包含的div和驗證消息ID，然后在JS函數中執行此操作：

  $('#tbTermDiv').removeClass('has-error');
  $('#tbTermNote').addClass('hidden');

視覺上可以解決問題的方法-錯誤消息消失了，文本框丟失了紅色，但是如果用戶再次清空該框，則紅色再次出現，但消息仍然隱藏...因此不是最佳解決方案。

我對任何一種解決方案都很滿意：淘汰賽，jQuery，純JS。

編輯：我注意到這不會更新可觀察的，所以當我通過value屬性更改輸入時，它不會更新可觀察的。

Answer 1

擴展器的工作方式與一般工程中的剔除方法相同。 它僅知道對視圖模型上的可觀察對象所做的更改。 使用jquery更新UI上控件的值不會更新基礎視圖模型，因此任何依賴的剔除代碼都不知道要更新。

您可以將set_term函數更改為視圖模型上的函數，並讓其更新基礎可觀察對象而不是控件。 然后使用數據綁定而不是原始js來調用函數。

  self.set_Term = function(months) {
      self.Term(months);
  };

...

  <li><a data-bind="click: function(){set_Term(84)}">84 Months</a></li>

這是一個更新的示例： https : //jsfiddle.net/jlspake/8ob0gj6q/3/