具有多个 ValidationGroups 的 Page_ClientValidate() - 如何同时显示多个摘要？

Question

ASP.NET 2.0。假设我有两个验证组 valGrpOne 和 valGrpTwo；和两个验证摘要 valSummOne 和 valSummTwo；拆分部分的原因纯粹是为了美观。一个提交按钮，可触发两个组的验证。

现在我想触发客户端验证，并希望同时显示两个验证摘要；

所以我设置了一个 Javascript 函数，它在 btnSubmit 时被调用，在这个函数中我连续调用 Page_ClientValidate("valGrpOne") 和 Page_ClientValidate("valGrpTwo")；问题是一次只有一个摘要显示（但我真的希望两个都显示！）

关于如何从客户端代码同时显示两个验证摘要的任何想法？

与以下问题非常相似，它为服务器端提供答案。 Triggering multiple validation groups with a single button?

Answer 1

这是针对多个组进行验证的另一种简单而通用的方法。

// Page_ClientValidate only shows errors from the last validation group.  
// This method allows showing for multiple groups
function Page_ClientValidateMultiple(groups) {
    var invalidIdxs = [];
    var result = true;

    // run validation from each group and remember failures
    for (var g = 0; g < groups.length; g++) {
        result = Page_ClientValidate(groups[g]) && result;
        for (var v = 0; v < Page_Validators.length; v++)
            if (!Page_Validators[v].isvalid)
                invalidIdxs.push(v);
    }

    // re-show any failures
    for (var i = 0; i < invalidIdxs.length; i++) {
        ValidatorValidate(Page_Validators[invalidIdxs[i]]);
    }

    // return false if any of the groups failed
    return result;
};

Answer 2

<b>Lets Say here is u r link button</b>
<asp:LinkButton ID="lnkbtnSubmit" runat="server" OnClientClick="return fnJSOnFormSubmit();" meta:resourcekey="lnkbtnSubmitResource1">Submit</asp:LinkButton>
<b> And u r Script is</b>
<script type="text/javascript">


    function confirmAction() {
        var retVal = confirm("Are you sure want to continue ?");
        if (retVal == true) {

            return true;
        }
        else {

            return false;
        }
    }

    function fnJSOnFormSubmit() {
        var isGrpOneValid = Page_ClientValidate("updateuser");
        var isGrpTwoValid = Page_ClientValidate("BaseKey");

        var i;
        for (i = 0; i < Page_Validators.length; i++) {
            ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
        }

        isGrpOneValid = Page_ClientValidate("updateuser");
        isGrpTwoValid = Page_ClientValidate("BaseKey");

        i =0;
        for (i = 0; i < Page_Validators.length; i++) {
            ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
        }

        if (isGrpOneValid && isGrpTwoValid)
            return true; //postback only when BOTH validations pass.
        else
            return false;
    }


    /* determines if a Validation Summary for a given group needs to display */
    function fnJSDisplaySummary(valGrp) {
        var rtnVal = false;
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].validationGroup == valGrp) {
                if (!Page_Validators[i].isvalid) { //at least one is not valid.
                    rtnVal = true;
                    break; //exit for-loop, we are done.
                }
            }
        }
        return rtnVal;
    }




</script>

Answer 3

这是对 joedotnot 有用代码的扩展。对于大多数 asp.net 用户来说，这可能有点过头了，但这有助于在提交时应用不同的验证组组合的项目，具体取决于选择了哪些按钮。

  var validationManager = function () {
        // Manual client-side validation of Validator Groups 
        // an empty string('') is default - to validate controls without a validation group
        var valGroups = [''],
        returnObj = { //define methods
            set: function (/*string argument list*/) {
                valGroups = Array.prototype.slice.call(arguments);
                return returnObj;
            },
            add: function (/*string argument list*/) {
                var i;
                for (i = 0; i < arguments.length; i++) {
                    if (valGroups.indexOf(arguments[i]) === -1) {
                        valGroups.push(arguments[i]);
                    }
                }
                return returnObj;
            },
            remove: function (/*string argument list*/) {
                var i = 0, n = 0;
                for (i = 0; i < arguments.length; i++) {
                    var n = valGroups.indexOf(arguments[i]);
                    if (n > -1) valGroups.splice(n, 1);
                }
                return returnObj;
            },
            validate: function () {
                var i = 0,
                    summariesToDisplay = [];
                for (; i < valGroups.length; i++) {
                if (!Page_ClientValidate(valGroups[i])) { //this will display the contents of the validator
                   summariesToDisplay.push(valGroups[i]);
                  }
                }
                if (!summariesToDisplay.length) { return true; }
                for (i = 0; i < Page_ValidationSummaries.length; i++) { //make relevant summaries visible
                if (summariesToDisplay.indexOf(Page_ValidationSummaries[i].validationGroup || '') > -1) {
                      Page_ValidationSummaries[i].style.display = "inline"; //"none"; "inline";
                    }
                }
                return false;
            }
         };
        if (arguments.length > 0) {
            returnObj.set.apply(null, arguments);
        }
        return returnObj;
    }

然后在各种事件处理程序中：

    //set up a global object
    var validateOnSubmit = validationManager('','BMIvalGrp');

    //within a radio click handler
    validateOnSubmit.add('weightValGrp','ageValGrp')
                    .remove('BMIvalGrp');

    //added to submit button handlers
    validateOnSubmit.validate();

Answer 4

这里是为了保持简单，一个非常简单的例子：

在您的页眉中有以下 javascript 方法：-

<script type="text/javascript" language="javascript">
function ShowModalDialog4Validations() {
    var x = $find("modalPopupExtenderValidations");
    Page_ClientValidate("vgValidations");
    if (!Page_IsValid)
        x.show();
}

modalPopupExtenderValidations 是模态弹窗的 ID。 vgValidations 是验证组的 ID。

现在，在页面预渲染方法中，将 onclick 属性添加到您希望在其上进行验证的按钮。

protected void Page_PreRender(object sender, EventArgs e)
    {
        btnMyButton.Attributes.Add("onclick", "ShowModalDialog4Validations();");
    }

我希望它容易理解。

再见。

Answer 5

未完全测试：

/* Manual client-side validation of Validator Groups - Remix */
function PageValidate() {
    var PageIsValid = true;

    for (var validator in Page_Validators) { 
        ValidatorValidate(validator);
        PageIsValid = PageIsValid && validator.isvalid;
    }

    if (PageIsValid) {
        return true; //postback only when ALL validations pass.
    }
    else {
        return false;
    }
}

/* This also does something similar */
function PageValidate() {
    return Page_ClientValidate();
}

Answer 6

好的，所以答案并不简单。客户端验证的默认行为似乎是仅显示刚刚验证的最新组/摘要。但是一点 Javascript tweeking 给了我一个可以接受的答案。

随时提供改进。

   <script type="text/javascript" language="javascript">
    /* Manual client-side validation of Validator Groups */
    function fnJSOnFormSubmit() {
        var isGrpOneValid = Page_ClientValidate("valGrpOne");
        var isGrpTwoValid = Page_ClientValidate("valGrpTwo");

        var i;
        for (i = 0; i < Page_Validators.length; i++) { 
            ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
        }

        //display all summaries.
        for (i = 0; i < Page_ValidationSummaries.length; i++) {
            summary = Page_ValidationSummaries[i];
            //does this summary need to be displayed?
            if (fnJSDisplaySummary(summary.validationGroup)) {
                summary.style.display = ""; //"none"; "inline";
            }
        }

        if (isGrpOneValid && isGrpTwoValid)
            return true; //postback only when BOTH validations pass.
        else
            return false;
    }


    /* determines if a Validation Summary for a given group needs to display */
    function fnJSDisplaySummary(valGrp) {
        var rtnVal = false; 
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].validationGroup == valGrp) { 
                if (!Page_Validators[i].isvalid) { //at least one is not valid.
                    rtnVal = true;
                    break; //exit for-loop, we are done.
                }
            }
        }
        return rtnVal;
    }
</script>