JqG​​rid表单编辑验证每个无效字段上的提交和显示错误的所有字段

Question

我正在使用jqGrid表单编辑带有来自链接的模板 Here

我已将模板更新为如下所示，如果有任何错误，我会在每个字段下方显示无效错误。

            template = "<div style='margin-left:15px;'><div> Customer ID <sup>*</sup>:</div><div> {CustomerID} </div>";
            template += "<div> Company Name: </div><div>{CompanyName} </div>";
            template += "<div> Phone: </div><div>{Phone} </div>";
            template += "<label for="Phone" class="error ui-state-error-text hidden"></label>";
            template += "<div> Postal Code: </div><div>{PostalCode} </div>";
            template += "<label for="PostalCode" class="error ui-state-error-text hidden"></label>";            
            template += "<div> City:</div><div> {City} </div>";
            template += "<label for="City" class="error ui-state-error-text hidden"></label>";  
            template += "<hr style='width:100%;'/>";
            template += "<div> {sData} {cData}  </div></div>";

现在我已经使用了一些字段添加了验证 jqgrid Edit Rules

让我说我有

editrules : { required: true} in Phone
editrules : { integer: true} in PostalCode
editrules: { custom: true, custom_func: myCustomCheck } in Country

我的自定义支票

  myCustomCheck = function (value, colname) {
        if (colname === "County") {
            var label = $("label[for='" + colname + "']");

            if (value.indexOf("foobar") > -1) {
                invalidDesc = true;
                $("#FrmGrid_mygrid").find('#' + colname).addClass("ui-state-error");

                label.html("Country cant be contain foobar");
                label.removeClass('hidden');
                return [false];
            }
            else
            {
                label.addClass('hidden');
                return [true];
            }

        }
        return [true];
    };

这里的问题是，当我点击提交时，它一次标记一个输入，并且无法在jqgrid预定义的那些编辑规则上显示我的自定义错误标签（如整数/必需）。它只显示表单顶部的错误。

我想要的是当用户点击提交时我验证所有输入并在所有无效输入上显示错误消息，而不是显示一次点击提交然后显示另一个...等等

Answer 1

作为我的问题的解决方案，我在表单模板的每个输入下面添加了一个隐藏的错误标签，如下所示

            template = "<div style='margin-left:15px;'><div> Customer ID <sup>*</sup>:</div><div> {CustomerID} </div>";
            template += "<div> Company Name: </div><div>{CompanyName} </div>";
             template +=  <label for="CompanyName" class="error ui-state-error-text hidden"></label>
            template += "<div> Phone: </div><div>{Phone} </div>";
            template +=  <label for="Phone" class="error ui-state-error-text hidden"></label>          
            template += "<div> Postal Code: </div><div>{PostalCode} </div>";
            template +=  <label for="PostalCode" class="error ui-state-error-text hidden"></label>                      
            template += "<div> City:</div><div> {City} </div>";
            template += "<label for="City" class="error ui-state-error-text hidden"></label>";         
            template += "<hr style='width:100%;'/>";
            template += "<div> {sData} {cData}  </div></div>";

将规则更改为全部自定义

editrules: { custom: true, custom_func: emptyCheck } in Phone
editrules : { custom: true, custom_func: numberCheck } in PostalCode
editrules: { custom: true, custom_func: myCustomCheck } in Country

自定义函数的定义如下。在自定义检查中发生的所有事情都会检查某些内容是否有效，如果错误标签无效则显示错误标签，并返回 true 。在自定义检查中返回false是验证无法继续到下一个字段的主要问题。

   // Add a global field invalid which would summarize the validation result
    var invalid = false;
 emptyCheck = function (value, colname) {

var label = $("label[for='" + colname + "']");
var input = $("#FrmGrid_grdEquipment").find('#' + colname);
    if (value) {
        label.addClass('hidden');
        input.removeClass("ui-state-error");
    }
    else {
        input.addClass("ui-state-error");
        label.html(colname+"is required");
        label.removeClass('hidden');
        invalid = true;
        // return [false, " Please correct the errors"];
    }

    return [true];

};

numberCheck = function (value, colname) {
    var label = $("label[for='" + colname + "']");
    var input = $("#FrmGrid_grdEquipment").find('#' + colname);
    if (!isNaN(parseFloat(value)) && isFinite(value)) {
        label.addClass('hidden');
        input.removeClass("ui-state-error");
    }
    else {
        input.addClass("ui-state-error");
        label.html(colname + "should be number");
        label.removeClass('hidden');
        invalid = true;
        // return [false, " Please correct the errors"];
      }

    return [true];
};


myCustomCheck = function (value, colname) 
{
    // check validation display the error label if not valid       
    return [true];
};

最后将其添加到“编辑对话框”

的选项中

onclickSubmit: function ((params, posdata) {   
if (invalid)
    {
        invalid = false;
        return;
    }
      // Else save row and do other stuff
}