Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Conditional rules/functions are only meant for:</p> <ul> <li>when the rule depends on something else. (Example: a field is only "required" when a checkbox is ticked.)</li> </ul> <p>It's <strong>not</strong> meant for:</p> <ul> <li>running a function whenever a rule is satisfied on a field.</li> </ul> <p>(<em>Yes, as you've seen, if you happen to use <code>.valid()</code> as part of a rule condition, you will cause recursion.</em>)</p> <hr> <p>The solution is to use a <code>keyup</code> event handler function along with <a href="http://jqueryvalidation.org/valid" rel="nofollow">the <code>.valid()</code> method</a> to check the status of the field.</p> <pre><code>$(document).on('pageinit', function () { // &lt;- DOM ready handler for jQuery Mobile // initialize plugin with .validate() $('#myform').validate({ // your rules &amp; options }); // fire this function on every key-up event within the password field $('input[name="password"]').on('keyup', function () { if ($(this).valid()) { // &lt;- check if password field is valid $('[name="rememberpassword"]') .checkboxradio('enable'); // &lt;- enable checkbox } else { $('[name="rememberpassword"]') .checkboxradio('disable') // &lt;- disable checkbox .attr('checked',false) // &lt;- uncheck checkbox if checked .checkboxradio('refresh'); // &lt;- refresh checkbox } }); }); </code></pre> <p><strong>Working DEMO: <a href="http://jsfiddle.net/6eEBC/" rel="nofollow">http://jsfiddle.net/6eEBC/</a></strong></p> <p>I chose not to make this part of the <code>onkeyup</code> callback function of the plugin since that would apply to every keyup event of <em>every field</em> on the form.</p> <p>I also "uncheck" the checkbox because, I suppose, you don't want it stuck on "checked" if it goes disabled again.</p> <p>According to <a href="http://jquerymobile.com/demos/1.2.1/docs/forms/checkboxes/methods.html" rel="nofollow">the jQuery Mobile docs</a>, you need to use <code>.checkboxradio('refresh')</code> when you "manipulate a checkbox via JavaScript" to update the visual styling. As per the examples on that page, it only applies when you check/uncheck the checkbox programatically.</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.
 

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