javascript - 如果总计无效，请将字段文本和边框设置为红色

我正在尝试为“总计”字段创建一个验证条件。项目总成本无效：项目总成本的最大和为9,999,999,999,999.99。一旦超过此值，则文本和文本的边框将为红色。将不胜感激。

<tr style="height:35px">
  <td> </td>
  <td align="center"><strong>TOTAL</strong></td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text" data-bind="attr: {'title': totalRequestfromNEHToolTip}, value: tRequestfromNEH">
  </td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" disabled="" type="text" data-bind="attr: {'title': totalRequestfromNEHToolTip}, value: tnonFedThirdPartyGifts">
  </td>
  </td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text" data-bind=" attr: {'title': totalCostShareToolTip}, value: tcostShare">
  </td>
  <!-- <td align="center"><input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text"></td> -->

var TOTAL = ko.computed(function() {
  var total = 0;
  var hasUserInput = false;
  if (tRequestfromNEH() != '' && tRequestfromNEH() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tRequestfromNEH()).replace(/\,/g, ''));
  }

  if (tnonFedThirdPartyGifts() != '' && tnonFedThirdPartyGifts() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tnonFedThirdPartyGifts()).replace(/\,/g, ''));
  }

  if (tcostShare() != '' && tcostShare() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tcostShare()).replace(/\,/g, ''));
  }

  if (total == 0) {
    if (!hasUserInput)
      return '';
    else
      return formatNumber('0');
  } else {
    if (loading == false) {
      sendCommand('SAVE');
    }
    return formatNumber(total);
  }
});

最佳答案

使用敲除CSS绑定。当总数超过10时，此处的文字和背景变为红色。https://jsfiddle.net/0o89pmju/57/

html

<form>
  <div class="form-group">
    <label for="number1">number 1</label>
    <input type="number" class="form-control" id="number1" data-bind="textInput: number1">
  </div>
  <div class="form-group">
    <label for="number1">number 2</label>
    <input type="number" class="form-control" id="number2" data-bind="textInput: number2">
  </div>
   <div class="form-group" data-bind="css: {'has-error': total() > 10 }">
    <label class="control-label">Total:</label>
      <p class="form-control-static" data-bind="text: total, css: {'bg-danger': total() > 10 }"></p>
  </div>

</form>

js

function viewModel() {
  var self = this;
  this.number1 = ko.observable('');
  this.number2 = ko.observable('');
  this.total = ko.pureComputed(function(){
    return parseInt(self.number1()||0) + parseInt(self.number2()||0)
    },this);

}


var vm = new viewModel();


(function($) {
  ko.applyBindings(vm); //bind the knockout model
})(jQuery);

关于javascript - 如果总计无效，请将字段文本和边框设置为红色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46080072/