Parsley Validation - 带有更新面板的 ASP.NET 表单答案

【问题标题】：Parsley Validation - ASP.NET form with update panelParsley Validation - 带有更新面板的 ASP.NET 表单
【发布时间】：2015-07-16 05:16:45
【问题描述】：

我正在开发一个旧的 asp.net 网络表单应用程序。我正在升级现有表单以拥有新的视觉风格，并使用欧芹验证。

我们之前使用了 webforms 验证控件，但我们升级到了 parsley，因为它提供了更好的用户体验，并允许在验证失败时为正在验证的控件设置样式（在我们的例子中，将红十字图形作为背景输入框）

表单有一个更新面板，用于查找邮政编码/地址。用户输入他们的邮政编码，然后单击“查找地址”按钮，这会触发更新面板中的回发。我已经能够将两个表单部分（主表单验证和邮政编码输入）分开，这样用户就是仅在单击“查找地址”时提示完成邮政编码（在输入框和按钮上使用 data-parsley-group="postcode"）。我给按钮添加了一个onclient点击事件，在触发按钮的onClick事件之前触发验证。参见下面的 sn-ps。

&lt;asp:ImageButton ID="addressLockup" runat="server" ImageUrl="/images/btn-find-address-off.gif" class="rollover" OnClientClick="return ValidatePostcode()" OnClick="Lookup_btn_Click"   CausesValidation="false" data-parsley-group="postcode"  /&gt;

function ValidatePostcode() {
  console.log("do postcode validaiton");
  if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {
    return true;
  }

  return false;
}

现在，谈谈我的问题：

如前所述，它正确验证已输入邮政编码，如果验证失败，则仅在邮政编码输入框中显示红十字。但是，一旦正确输入了邮政编码，并且用户单击了按钮，它就会正确触发 onClick 事件，但此时，所有其他未正确填写的 parsley 验证输入框都显示 parsley-error 状态（在我的情况下显示红十字）..一旦回发完成，我已经能够清除这些，但您会短暂看到红十字闪烁，客户不会接受..

如何防止所有其他表单控件在 OnClick 事件触发时显示？我猜是因为它此时正在提交表单..

感谢阅读，丹尼

【问题讨论】：

你能分享一个复制你的问题的小提琴吗？正如您所说，您发布的解决方案似乎很老套，如果我们可以复制正在发生的事情，也许我们可以找到另一个解决方案。谢谢。
这是一个 ASP.NET 表单，所以我将无法创建提琴手..

标签： asp.net webforms parsley.js

【解决方案1】：

我为此找到了一个工作区，通过在回发发生之前更改 parsley-error 样式，然后从所有控件中删除 parsley-error 样式，在页面重新加载后更改回 parsley-error 样式：有点 hacky，但它有效.. 如果有人有更好的解决方案，很高兴听到它！

  function ValidatePostcode() {
            console.log("do postcode validaiton");
            if (true === $('#aspnetForm').parsley("postcode").validate("postcode", true)) {

                var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url(""); background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("") ;background-color: #ffffff;}</style>';
                $("head").append(style);
                

                return true;
            }

            return false;
        }


        function pageLoad(sender, args) {
             $(".parsley-error").removeClass("parsley-error");
             var style = '<style type="text/css">#accountRegisterContainer input.parsley-error {background: url("/Images/parsley-cross.png") no-repeat right 10px center;; background-color: #ffffff;}#accountRegisterContainer select.parsley-error { background: url("/Images/parsley-tick.png") no-repeat right 10px center;background-color: #ffffff;}</style>';
            $("head").append(style);
        }

【讨论】：