禁用提交按钮，以防止双击，但只有在成功的表单验证

Question

目前我的页面有一个提交按钮，当它被点击时被禁用，以防止重复提交

<tr:commandButton onclick="this.disabled=true;" />

但是，如果表单中有错误，用户将无法重新提交表单，因为提交按钮被禁用。

是否有任何方法让我禁用提交按钮，只有当它清除表单验证?

我的页面看起来是这样的:

<rich:tabPanel headerAlignment="left" switchType="client" width="100%">
    <rich:tab label="#{cfsMsgs.main_tab_label}" name="mainTab">
        <rich:spacer height="20" />
        <ui:include src="add_main.xhtml" />
    </rich:tab>
    <rich:tab label="#{cfsMsgs.qualification_tab_label}" name="qualificationTab">
        <rich:spacer height="20" />
        <ui:include src="add_qualification.xhtml" />
    </rich:tab>
    <!-- ...and so on... -->

在每个标签上都有一些验证方法，比如

<tr:inputText ...>
    <tr:validateRegExp pattern="^S.*" ... />
</tr:inputText>

,

<tr:inputText validator="#{backingBean.validate}" ...>
</tr:inputText>

是否可以将我的按钮设置为onclick="this. "disabled=[页面错误指示符，例如page。"?

编辑1:另一种方法是在页面提交失败时重新呈现按钮。我对我的代码做了如下修改:

<tr:commandButton onclick="this.disabled=true;" id="btnSubmit">
    <a4j:support event="oncomplete" reRender="btnSubmit" ajaxSingle="true" oncomplete="alert('done!');" />
</tr:commandButton>

a4j:支持中的oncomplete事件是为了让我看看它是否完成。然而，当我试着运行这个，我没有看到任何警报。这是否意味着我做错了什么?

Answer 1

这对我来说很好(基于javaScript):

//Initialize our submit flag to false
var formSubmitted = false;
/**
 * Prevent from submitting a form more than once
 * @returns {Boolean}
 */
function submitForm()
{   
  //has the form been submitted before?
  if( formSubmitted == true )
  {
     alert("This form has already been submitted!");
     return false;
  }
  formSubmitted = true;
  return true; // Submit form
}

并应用于commandButton:

<h:commandButton action="#{bean.action}" onclick="return submitForm();"/>

Answer 2

我不太确定，但你试过吗:

<tr:commandButton onsubmit="this.disabled=true;" />

Answer 3

按钮标签:

<asp:Button ID="Submit" runat="server" Text="Submit"
            Width="150" OnCommand="GoFromHere" CommandArgument="2"
            OnClientClick="disableSubmitButtons()" />

HTML:

<input type="submit" value="Submit" onclick="disableSubmitButtons()" />
<script type="text/javascript">
//disable the button and do nothing if user clicks a second time
function disableSubmitButtons() {
    event.srcElement.onclick = doDisable;
}
function doDisable(){
    event.srcElement.disabled=true;
}
</script>