[英]If total is invalid, set the field text and border to red
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. 项目总成本无效:项目总成本的最大和为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);
}
});
use the knockout css binding. 使用敲除CSS绑定。 here is one where the text and background go red when the total exceeds 10. https://jsfiddle.net/0o89pmju/57/ 这是当总数超过10时文本和背景变为红色的一种。https://jsfiddle.net/0o89pmju/57/
html 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 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.