If total is invalid, set the field text and border to red

Question

I'm trying to make a validation condition for the field Total. Total project costs is invalid: The maximum sum for Total project costs is 9,999,999,999,999.99. Once it is more than this value, the border of the text and the text would be red. Would appreciate any help.

<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);
  }
}); 

Answer 1

use the knockout css binding. here is one where the text and background go red when the total exceeds 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);