仅当页面验证时才禁用提交按钮

Question

我无法让它为我的生活工作。只有在所有验证完成后，我才需要禁用提交按钮，然后将页面发布到 OnClick 函数。

我有一个填写了RequiredFieldValidators 和ValidationSummary 的表格。现在它验证并且按钮被禁用但页面没有继续发布，它只是停留在这个状态：

我的按钮

<asp:Button ID="Button3" runat="server" OnClick="Submit_Form" CssClass="btn btn-primary"
                Text="Submit" OnClientClick="return disableOnSubmit(this);" />

JS 禁用按钮

<script type="text/javascript">
function disableOnSubmit(target) {
    if (typeof (Page_ClientValidate) == 'function') {
        if (Page_ClientValidate() == false) { return false; }
    }
        target.value = 'Please wait...';
        target.disabled = true;
        return true;
}
</script>

我试图阻止用户提交表单两次。该按钮应在用户单击后禁用，然后才会将其带到下一页。

Answer 1

嗯，我经常使用 Javascript 库 Valid8。节省一些时间进行验证，否则我会做这样的事情（原始示例）：

<asp:LinkButton 
     Id="btnSubmit" runat="server"
     Text="Submit" CssClass="btn btn-Primary"
     OnClientClick="return Submit()" />

当按钮被点击时，它会调用我们的函数Submit。

function Submit() {
     var value = $("#txtField").Val();
     if(value != '') {
          if(!confirm("Are you sure you would like to submit?")) {
              return false;
          } else {
                return true; 
                // Be aware Link Button can have issue in Asp.Net sometimes.
          }
     }

因此验证发生在客户端上。现在你只需把它放在你的Page_Load:

btnSubmit.Click = new EventHandler("btnSubmit_Click");

然后将Postback 的数据放在btnSubmit_Click 中，如下所示：

protected void btnSubmit_Click(object sender, EventArgs e)
{
     // Do Something.
}

这就是我会做的方法，主要是为了避免毫无根据的Postbacks。请记住，我的 Javascript 示例非常原始，只需确保它不是 null。

只需阅读您希望避免多次提交，您可以通过Session Variable 来避免它或干脆这样做：

if(Page.IsPostBack) 
{
     btnSubmit.Enabled = false;
}

这将继续 Page_Load。显然任何Postback 都会立即禁用该按钮。因此，您可能希望在实际实施之前确保它在您的实施中有效。