Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could use the jQuery <a href="http://api.jquery.com/change/" rel="nofollow noreferrer"><code>.change()</code></a> function.</p> <p>After the page initially loads, you can validate the entire form, just to check that it is in fact not filled in. After that you can use <a href="http://api.jquery.com/change/" rel="nofollow noreferrer"><code>.change()</code></a> to check if things have changed on the form, and if anything has changed, validate the form again.</p> <pre><code>$(document).ready(function() { // validate form once, just to be sure (if valid, activate submit button) }); ... &lt;form&gt; &lt;input class="target" type="text" value="Field 1" /&gt; &lt;select class="target"&gt; &lt;option value="option1" selected="selected"&gt;Option 1&lt;/option&gt; &lt;option value="option2"&gt;Option 2&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; $('.target').change(function() { alert('Something changed'); // Try validating form again (if valid, activate submit button) }); &lt;/script&gt; </code></pre> <hr> <p><strong>Plan B</strong></p> <p>Another option is to always have the submit button clickable, but use <a href="http://api.jquery.com/submit/" rel="nofollow noreferrer"><code>.submit()</code></a> to bind it to the form validator. Then if the form IS valid, carry on. If the form IS NOT valid use <a href="http://api.jquery.com/event.preventDefault/" rel="nofollow noreferrer"><code>.preventDefault()</code></a> to stop the submission of the form..... and you'd display a warning message too, indicating the missing fields.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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