为什么当我在网站上上传时我的 jQuery 不起作用

Question

When I write the code on console, its working. When I upload on the website it is not working.

I want to do a stripe card details fields validation. When the details are filled and while filling the border color of the box should be green same as card details

Code that I tried:

if (jQuery('.input-text.wc-credit-card-form-card-expiry').val() == '') {
    jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'red');
}
else {
    jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'green');
}

Webpage URL: https://www.preprod.swett.se/checkout-2/

If you check on the website. Card number field is working correct. I want the expiration date and cvv field date should also work same as card details

Could you please help me with this jQuery.

Answer 1

Try this and see if it works, please make sure to include jQuery :

jQuery('#stripe-card-expiry').on('keyup', function(){
  var $input = jQuery(this);
  $input.css('border-color', !$input.val() ? 'red' : 'green');

});

Answer 2

Card number field is working correct because of this code

    jQuery('#stripe-card-number').on('keyup', function ($) {
    if (jQuery(this).val().length > 0) {
        jQuery('#stripe-card-number').css('border', '2px solid #69bf29');
            }
    });

So, similaraly you need to trigger your code on keyup event for expiration date and cvv

jQuery('.wc-credit-card-form-card-expiry').on('keyup', function ($) {

   if (jQuery('.input-text.wc-credit-card-form-card-expiry').val() == '') {
       jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'red');
   }
   else {
       jQuery('.input-text.wc-credit-card-form-card-expiry').css('border-color', 'green');
   }

});