根据验证结果在 ASP 中应用 jQuery 效果答案

【问题标题】：apply a jQuery effect in ASP based on validation result根据验证结果在 ASP 中应用 jQuery 效果
【发布时间】：2014-05-08 03:03:01
【问题描述】：

我有一个带有控制面板的网络表单 (#pnlStepOne)。该面板包括两个文本字段“txtFname”和“txtLname”。我为每个文本字段设置了一个验证器。我已经根据需要测试了表格和所有工作。

我的问题是，只有当一个（或两个）文本字段（“txtFname”和“txtLname”）不验证时，如何向面板 onclick 事件添加 jQuery 效果。（这种效果会“震动”面板）。

如果两个字段都由 asp:RequiredFieldValidators 验证，我想添加另一个 jQuery 效果来“翻转”控制面板并将当前一个 (#pnlStepOne) 切换为另一个 (#pnlStepTwo)。

只是一个示例代码，一旦我拥有正确的 If 条件，我将对其进行调整。

$(document).ready(function () {
        $("#btnStepOne").click(function (event) {
            if (**this is the condition that I am missing**)
            {
                $('#pnlStepOne').css({
                    background: 'red',
                });                
            }
        });
    });

【问题讨论】：

您使用什么进行验证？您是否使用默认的 ASP.NET 验证器（如 asp:RequiredFieldValidator）？
@Stefano -是的，我使用的是默认的 asp.net 验证器。 <asp:RequiredFieldValidator ID="fvFname" runat="server" ControlToValidate="txtFname" ErrorMessage="Fist Name is missing!"></asp:RequiredFieldValidator>

标签： javascript jquery asp.net validation

【解决方案1】：

你可以修改你的代码如下：

$(document).ready(function () {
    $("#btnStepOne").click(function (event) {
        var fvFname = document.getElementById('client-id-of-your-fvFname-validator');
        var fvLname = document.getElementById('client-id-of-your-fvLname-validator');
        ValidatorValidate(fvFname);
        ValidatorValidate(fvLname);
        if (!fvFname.isvalid || !fvLname.isvalid) {
            $('#pnlStepOne').css({
                background: 'red',
            });
        }
    });
});

【讨论】：

【解决方案2】：

这里有我对类似问题的回答：

Enable/Disable asp:validators using jquery

这里有 MSDN 链接：http://msdn.microsoft.com/en-us/library/aa479045.aspx

在我的一个项目中，我使用了prettifyValidation 函数，所以你可以有类似的东西：

$(document).ready(function () {
    $("#btnStepOne").click(function (event) {
        prettifyValidation();
    });
});



function prettifyValidation() {
    var allValid = true;
    if (typeof Page_Validators != 'undefined') {
        // Loop through from high to low to capture the base level of error
        for (i = Page_Validators.length; i >= 0; i--) {
            if (Page_Validators[i] != null) {

                if (!Page_Validators[i].isvalid) { // The Control is NOT Valid
                    $("#" + Page_Validators[i].controltovalidate).removeClass("makeMeGreen").addClass("makeMeRed");

                    allValid = false;
                } else { // Control is valid
                    $("#" + Page_Validators[i].controltovalidate).removeClass("makeMeRed").addClass("makeMeGreen");
                };
            };
        };
    };
}

这将遍历页面上所有附加了 ASP.NET 验证器的控件，然后根据它们是否有效来添加或删除一个类。

显然，从这里您可以通过匹配controlToValidate 属性将函数限制为特定控件，并且您可以重新设置样式、添加控件、更改类，但这应该有望为您提供一个不错的工作基础。

【讨论】：

感谢您的回答。很有帮助！