突出显示特定文本框上的错误：KnockoutJS答案

【问题标题】：Highlight error on specific textbox: KnockoutJS突出显示特定文本框上的错误：KnockoutJS
【发布时间】：2018-06-25 09:11:07
【问题描述】：

使用asp.net mvc、c#、knockoutjs

我旁边有一个文本区域和一个添加按钮。用户可以输入文本区域并按检查按钮，或者他们可以单击添加按钮添加另一个文本区域，然后单击检查按钮。他们可以添加的文本区域没有限制。当他们按下 CHECK 按钮时，代码会触发我的 MVC 控制器方法并对输入进行一些验证。如果输入正常，我会继续，否则会显示错误。

我的问题是突出显示正确的错误。现在我只是使用一个通用错误标签来显示错误。我想向 textarea 显示错误，该错误不是通用错误。我的代码如下。

<form id="form" asp-controller="Home" asp-action="FilterMaintenance" method="post">
<div class="form-horizontal" style="margin-top:50px">
<div data-bind="foreach: { data: records }">
    <div class="form-group">
        <div class="col-md-6 ">
            <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}"></textarea>
            <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}"></span>
        </div>
        <div class="col-md-2">                       
            <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()" />
        </div>  
    </div>
</div>
<div class="form-group">
    <div class="col-md-2">
        <input type="button" value="Check Input" class="btn btn-primary" data-bind='click: checkInput' />
    </div>
</div>
    <div class="form-group" data-bind="visible: errorFlag">
        <span data-bind="text: errorText"></span>
    </div>
</div>

淘汰码：

(function () {
var viewModel = function (vmData) {

    var self = this;        
    self.errorFlag = ko.observable(false);
    self.errorText = ko.observable();        
    self.records = ko.observableArray();

    self.records([{            
        input: ""
    }]);

    self.addRecord = function () {           
        self.records.push(
            {
                input: ""
            });
    };

    self.checkInput = function () {

        var returnVal = false;
        var records = self.records();
        var input = JSON.stringify(records);
        //With abc as first and def as second texarea entry I get as below
        //"[{"input":"abc"},{"input":"def"}]"

        $.ajax({
            type: "POST",                
            async: false,
            url:"/Home/CheckRecord",
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            data: {                
                "input": input
            },
            success: function (data) {
                self.errorFlag(true);
                if (data == '') {
                    self.errorText('Input is correct');                                                
                    returnVal = true;
                }
                else {
                    self.errorText('Input is not correct: ' + data);                                                
                    returnVal = false;
                }
            }
        });

        return returnVal;
    }
}      

    var pageVM = new viewModel();
    ko.applyBindings(pageVM, $("form")[0]);

})();

MVC 控制器：

[HttpPost]
    public IActionResult CheckRecord(string input)
    {
       string parseError = string.Empty;
       bool inputCheck = false;
       string returnValue = string.Empty;

        inputCheck  = false;//doing some checks here then return true or false
        returnValue = inputCheck ? "" : "error";

        var ret = Json(returnValue);

        return ret;
    }

我还获得了以下为添加的 2 个文本区域生成的 HTML：

<div class="form-group">
                <div class="col-md-6 ">
                    <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}" name="Records[0].Input" id="Records[0].Input"></textarea>
                    <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}" data-valmsg-for="Records[0].Input"></span>
                </div>
                <div class="col-md-2">                       
                    <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()" style="display: none;">
                </div>              

            </div>

<div class="form-group">
                <div class="col-md-6 ">
                    <textarea rows="1" class="required text-danger form-control textbox-wide" data-bind="value: $data.input, attr: { name: 'Records[' + $index() + '].Input', id: 'Records[' + $index() + '].Input'}" name="Records[1].Input" id="Records[1].Input"></textarea>
                    <span class="help-block-msg field-validation-valid" data-valmsg-replace="true" data-bind="attr: { 'data-valmsg-for': 'Records[' + $index() + '].Input'}" data-valmsg-for="Records[1].Input"></span>
                </div>
                <div class="col-md-2">                       
                    <input type="button" value="Add Record" class="btn btn-primary" data-bind="click: $parent.addRecord, visible: function(){ return !($index() != $parent.records().length - 1) }()">
                </div>              

            </div>

抱歉，这篇文章很长，但想显示完整的代码以进行解释。

感谢任何意见。

更新：

我也在 jsfiddle 中添加了这个：

 https://jsfiddle.net/gmmmh873/

【问题讨论】：

有人输入吗？
为什么要在成功信息中设置错误文本？

标签： javascript jquery knockout.js knockout-2.0

【解决方案1】：

我建议查看Knockout-Validation。它可以为您处理大部分事情，并且有很棒的documentation 可以帮助您入门。当不满足规则时，这会在每个输入字段中注入错误消息。您也可以从您的 xhr 调用返回的响应中触发这些。

【讨论】：