Databases
StackOverflow2013
Postsdbo
POExecuting javascript function before message that a value is required is shown
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExecuting javascript function before message that a value is required is shown
    text
    copied!<p>I have a short question that has been bothering for last few hours: </p> <p><strong>How can I execute a javascript function before message that a value is required is shown?</strong> (on form submit some value inside of it is empty when it needs to be entere).</p> <p>I have faced this problem while using RealPerson captcha plugin for jQuery in my jsp page. When I click on submit button with input field for captcha empty, the captcha disappears.</p> <p><strong>Update 1:</strong></p> <p>I tried with binding and rendered but the problem still seems to be there.</p> <pre><code>&lt;h:outputLabel for="captcha" value="#{ui.pleaseEnterTextInTheImage}" rendered="#{sessionBean.showCaptcha}"/&gt; &lt;h:panelGroup rendered="#{sessionBean.showCaptcha}"&gt; &lt;h:inputText id="captcha" styleClass="captcha" binding="#{captcha}" validator="#{validationBean.captchaValidator}" required="true"/&gt; &lt;h:outputText value=" "/&gt;&lt;h:message for="captcha" styleClass="captchaMsg"/&gt; &lt;/h:panelGroup&gt; &lt;h:panelGroup rendered="#{!captcha.valid}"&gt; &lt;script&gt;alert('Foo input is invalid!');&lt;/script&gt; &lt;/h:panelGroup&gt; </code></pre> <p><strong>Update 2:</strong></p> <p>When page goes live:</p> <p><img src="https://i.stack.imgur.com/ukcZu.png" alt="before"></p> <p>After I click "Register" with captcha entry left blank: <img src="https://i.stack.imgur.com/aUPTq.png" alt="after"></p> <p><strong>Update 3:</strong></p> <p>jQuery code that I use.</p> <p>First on pageload, I assign the captcha to the field:</p> <pre><code>$(function() { $('.captcha').realperson(); }); </code></pre> <p>Then, after I reassign a new captcha after the field gets rerendered by calling this function from my bean:</p> <pre><code>function updateCaptchaFromBean() { $(function() { $('.captcha').realperson(); }); } </code></pre> <p><strong>Found solution</strong></p> <p>I've found a simple javascript trick to solve this with <code>onclick()</code>:</p> <pre><code>&lt;h:commandButton styleClass="buttonSubmit" value="#{ui.registerBUTTON}" action="#{register.addAction}" onclick="if ($('.captcha').val() == '') return false" id="submitBtn" /&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload