Question

我正在开发一个传统的asp.net Web表单应用程序。我正在升级现有表单以获得新的视觉样式，并使用欧芹验证。

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

表单有一个更新面板，用于邮政编码/地址查找。用户输入他们的邮政编码，然后点击＆＃34;查找地址＆＃34;按钮，它在更新面板中触发回发..我已经能够分离两个表单部分（主表单验证，只是邮政编码输入），这样只有在单击＆＃时才提示用户完成邮政编码。 34;查找地址＆＃34; （在输入框和按钮上使用data-parsley-group =＆＃34; postcode＆＃34;）。我在按钮上添加了一个onclient click事件，在触发按钮的onClick事件之前触发验证。见下面的片段。

＆＃13;

<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"  />

＆＃13;

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

＆＃13;

现在，关于我的问题：

如前所述，它正确验证了已输入的邮政编码，如果验证失败，则仅在邮政编码输入框中显示红叉。但是，一旦正确输入了邮政编码，并且用户点击了该按钮，它就会正确触发onClick事件，但此时，所有其他经过欧洲验证的输入框都没有得到相应的填写，显示了欧芹 - 错误状态（在我的情况下显示红叉）..我已经能够清除这些一旦回发完成，但你简要地看到红色十字架闪光，客户不会接受..

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

感谢阅读，丹尼

Answer 1

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

＆＃13;

  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);
        }

＆＃13;

欧芹验证 - 带有更新面板

1 个答案: