如果页面验证，则仅禁用提交按钮

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都会立即禁用该按钮。因此，您可能希望确保在实际实施之前适用于您的实现。