Use jQuery (or JSF way) to prevent h:commandButton submit
<p>I have a JSF page(already register jQuery in header) contains <code>indicator</code>, <code>reason</code> and a <code>h:commandButton</code> used for submit <code>h:form</code>. The <code>indicator</code> has two values <code>Y</code> and <code>N</code>. </p>

<p>The logic I try to build is when page load and <code>indicator = Y</code>(in jQuery below is <code>indicator.data("prev") == 'Y'</code>), if user toggle from <code>Y</code> to <code>N</code> but NOT type in any word in <code>reason</code>, even the user click the <code>h:commandButton</code>, the form should <strong>NOT</strong> submitted. </p>

<p>In short, before submit, it should check status of indicator's current and previous value relation is turn from <code>Y</code> to <code>N</code>(I set this logic part in jQuery script section), also need to check reason is not empty. <strong>I guess to implement such checking operations may need to re-organize code structure.</strong></p>

<p>Below is my current code which missing this logic, never prohibit a submit and cause conflict on backing bean, . As I am new to jQuery and JSF, could someone tell me how to prevent this submit ? Thank you.</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"&gt;

&lt;h:head&gt;
    &lt;title&gt;myPage&lt;/title&gt;
    &lt;h:outputScript name="jquery.js" target="head"/&gt;
&lt;/h:head&gt;

&lt;f:event type="preRenderView" listener="#{myPage.getmyPage}" /&gt;

&lt;h:body&gt;
    &lt;f:view&gt;
        &lt;h:form name ="myPage" id ="myPage"&gt;        
            &lt;table&gt;
            &lt;tr&gt;
                &lt;td align="left"&gt;
                    &lt;h:selectOneMenu id="indicator" value="#{myPage.indicator}"&gt;
                        &lt;f:selectItem itemValue="Y" itemLabel="YES" /&gt;
                        &lt;f:selectItem itemValue="N" itemLabel="NO" /&gt;                           
                    &lt;/h:selectOneMenu&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;h:inputTextarea id="reason" value="#{myPage.reason}"&gt;
                    &lt;/h:inputTextarea&gt;
                &lt;/td&gt;                   
                &lt;td&gt;
                    &lt;h:commandButton id="submit" value="Submit" 
                        onclick="if (! confirm('Do you want to update?')) return false" action="#{myPage.update}"&gt;
                    &lt;/h:commandButton&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/h:form&gt;
    &lt;/f:view&gt;


    // TODO: I want to add the logic to prevent h:commandButton submit(e.g disable the button) when reason is empty 
    // and indicator value turn from 'Y' to 'N', the jQuery section reflect the case when toggle from 'Y' to 'N', 
    // reason editable, as it need to consider two elements(indicator value/ reason value) at the same time, 
    // how should the code look like ?

    &lt;script type="text/javascript"&gt;
        $(window).load(function() {        
            var indicator = $(document.getElementById("myPage:indicator"));
            // set the indicator pre data
            indicator.data("prev", indicator.val());

            // Handle initial status of indicator, when page load, if it is 'Y' open reason field
            // if it is 'N' disable reason field, 
            if(indicator.data("prev") == 'Y') {
                $(document.getElementById("myPage:reason")).prop('disabled', false);
            } else {
                $(document.getElementById("myPage:reason")).prop('disabled', true);
            }

            // Handle change status of indicator, 
            indicator.change(function(data){
                var jqThis = $(this);
                var after_change = jqThis.val();
                var before_change = jqThis.data("prev");
                if(before_change == 'Y' &amp;amp;&amp;amp; after_change == 'N'){
                    $(document.getElementById("myPage:reason")).prop('disabled', false);                        
                }
            });
        });
    &lt;/script&gt;});
&lt;/h:body&gt;
</code></pre>

<p></p>