title: Jquery issue with val not working as expected
body: <p>I have a couple of forms on a site. On the first form I used the code below to add a border color if the input field is not blank and remove it if it is blank. This works just fine no issues. But I've found that when I try to use the same method on other forms, to do something else using the same logic, it does not work.</p>
  <p>I have read through many forums and what I'm seeing is that the code is only read on page load. But I have forms that run the function after the page is far past loading. Can someone give some light to this? I'm really trying to understand the way this works fully.</p>
  <p>Code that works on form:</p>
  <pre><code>var checkErrorIn;
  
  jQuery(document).ready(function ($) {
      checkErrorIn = setInterval(CheckErrorInput, 0);
  });
  
  
  function CheckErrorInput() {
  
  
      if (jQuery('body').is('.page-id-6334')) {
          // First Name, Last Name validation colors
          var pasdFName = jQuery('#first_name').val();
          var pasdLName = jQuery('#last_name').val();
  
          if (pasdFName != '') {
              jQuery('#first_name').addClass('formConfirm_cc');
          } else {
              jQuery('#first_name').removeClass('formConfirm_cc');
          }
  
          if (pasdLName != '') {
              jQuery('#last_name').addClass('formConfirm_cc');
          } else {
              jQuery('#last_name').removeClass('formConfirm_cc');
          }
  
          if (pasdFName != '' &amp; pasdLName == '') {
              jQuery('#last_name').addClass('formError_cc');
          } else {
              jQuery('#last_name').removeClass('formError_cc');
          }
  
          if (pasdFName == '' &amp; pasdLName != '') {
              jQuery('#first_name').addClass('formError_cc');
          } else {
              jQuery('#first_name').removeClass('formError_cc');
          }
      }
  }
  </code></pre>
  <p>Code that is not working:</p>
  <pre><code>if (jQuery('body').is('.woocommerce-page')) {
  
      var checkActiveName = jQuery('.woo_login_form &gt; form &gt; #username').val();
  
      jQuery('.woo_login_form').on('input', function(){
          jQuery('.woo_login_form').addClass('cdc_keep_active');
      });
  
      if (checkActiveName =='') {
          jQuery('.woo_login_form').removeClass('cdc_keep_active');
      }
  
  }
  </code></pre>
  <p>What I am trying to do is fix an issue with a form becoming hidden if not hovered over even when the input has characters. Based on my research I figured I'd do the .on to get the class added when the input got characters. That works but the removal of the characters isn't removing the class. The logic looks right to me. What am I missing?</p>
  <p>Thank you in advance for your help and insight.</p>
  <p><strong>Update:</strong></p>
  <p>Ok so I ended up doing this:</p>
  <pre><code>  jQuery('.woo_login_form').on('click', function () {
          jQuery('.woo_login_form').addClass('cdc_keep_active');
      });
  
      jQuery('.custom-login-box &gt; a').on('click', function () {
          jQuery('.woo_login_form').toggle();
      });
  </code></pre>
  <p>For some reason my class would not add with any of the methods suggested individually so I combined the logic. The first part adds the class that makes the form visible but then the form won't close if clicked out of regardless of the 'removeClass'. So I added a toggle (thank you commenters) method to the &quot;hovered link&quot; to allow users to close the box if not needed.</p>
  <p>Would still like to understand why the first method worked in one instance but not the other. Any and all insight appreciated. Thank you.</p>