02 July 2009

JSF- Disable Submit button, re-enable if validation fails

Ran into an interesting question: How do you disable a Submit button when the user clicks it, but re-enable it if validation fails? With JSF, it's actually simple. Here's an example with Richfaces:
  onclick="this.disabled=true"
oncomplete="#{facesContext.maximumSeverity == null ? '' : 'this.disabled=false'}"/>

Disable the Submit button on every click; then oncomplete, see if there were errors. If so, re-enable the Submit button.

2 comments:

Anonymous said...

How can we do that if we are using simple JSF 1.1

Alex C said...

I've not worked with JSF by itself so can't say exactly. However, you can use jQuery or just plain JavaScript. This gets more complicated if using AJAX.

With just JavaScript, you could try putting some JS on the button to intercept the user's click. In the onclick event handler, use the button's ID to reference it and disable it, then check to see if form validates. If so, leave it disabled and submit the form. Otherwise, display the error messages and don't submit the form.