Jquery issue with val not working as expected

user_16762927 0
Viewed 37

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.

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.

Code that works on form:

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 != '' & pasdLName == '') {
            jQuery('#last_name').addClass('formError_cc');
        } else {
            jQuery('#last_name').removeClass('formError_cc');
        }

        if (pasdFName == '' & pasdLName != '') {
            jQuery('#first_name').addClass('formError_cc');
        } else {
            jQuery('#first_name').removeClass('formError_cc');
        }
    }
}

Code that is not working:

if (jQuery('body').is('.woocommerce-page')) {

    var checkActiveName = jQuery('.woo_login_form > form > #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');
    }

}

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?

Thank you in advance for your help and insight.

Update:

Ok so I ended up doing this:

  jQuery('.woo_login_form').on('click', function () {
        jQuery('.woo_login_form').addClass('cdc_keep_active');
    });

    jQuery('.custom-login-box > a').on('click', function () {
        jQuery('.woo_login_form').toggle();
    });

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 "hovered link" to allow users to close the box if not needed.

Would still like to understand why the first method worked in one instance but not the other. Any and all insight appreciated. Thank you.

validation forms jquery javascript
1 Answers

In your current code example you immediately check for the value of the username field.

var checkActiveName = jQuery('.woo_login_form > form > #username').val();

The thing with this is that checkActiveName will never change, unless it is reassigned elsewhere in the code.

What you need to do is to check the current value after every input of the user. That means moving that line of reading the value of the input inside the input event listener.

if (jQuery('body').is('.woocommerce-page')) {
  var $wooLoginForm = jQuery('.woo_login_form');
  var $userName = jQuery('#username'); // This ID should only exist once, so no need for complex selectors.

  $wooLoginForm.on('input', function() {
    var checkActiveName = $userName.val();

    if (checkActiveName =='') {
      $wooLoginForm.removeClass('cdc_keep_active');
    } else {
      $wooLoginForm.addClass('cdc_keep_active');
    }
  });
}

On a sidenote: using setInterval to validate your form is a bad practice. This would basically run infinitely. It doesn't have to. You only have to check if a form is valid after the user enters a value.

Apply the same technique with the event listener like in your second code snippet.

var $document = jQuery(document);
$document.ready(function ($) {
  /**
   * It might even be better to listen for the input event on the form 
   * that has to be validated, but I didn't see it in your code.
   * Right now it listens for input on the entire page.
   */
  $document.on('input', CheckErrorInput);
});
user_116196470
Related