jQuery if valid show icon else show invalid icon

Question

I'm trying to do the following, If one or more inputs have "woocommerce-invalid" class display error "red cross" icon else if all fields are completed display success "green tick".

I've tried with this, It added "checkout-tick-one" but would add/remove class if was valid or not.

$(".checkout-profile input").each(function () {
    if ($(this).hasClass("woocommerce-invalid")) {
        $('.symbol').addClass('checkout-cross-one');
        $('.symbol').removeClass('checkout-tick-one');
    } else {
        $('.symbol').addClass('checkout-tick-one');
        $('.symbol').removeClass('checkout-cross-one');
    }
});

I need it to work with the following.

.on('blur change', '.input-text, select', function () {
    var $this = $(this);
    var $parent = $this.closest('.form-row');
    var validated = true;

    if ($parent.is('.validate-required')) {
        if ($this.val() == '') {
            $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-required-field');

            validated = false;
        }
    }

    if ($parent.is('.validate-email')) {
        if ($this.val()) {

            /* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

            if (!pattern.test($this.val())) {
                $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-email');
                validated = false;
            }
        }
    }

    if (validated) {
        $parent.removeClass('woocommerce-invalid woocommerce-invalid-required-field').addClass('woocommerce-validated');
    }
})

So if one, two or three inputs had invlaid classes the symbol will show tick or cross depening if correct or not.

I also just tried, it seems to work but when i click on another field the icon changes even through another field has the invalid class.

.on('blur change', '.input-text, select', function () {
    var $this = $(this);
    var $parent = $this.closest('.form-row');
    var validated = true;
    if ($parent.is('.validate-required')) {
        if ($this.val() == '') {
            $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-required-field');
            $('.symbol').addClass('checkout-cross-one');
            $('.symbol').addClass('checkout-tick-one');
            validated = false;
        }
    }
    if ($parent.is('.validate-email')) {
        if ($this.val()) {
            /* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

            if (!pattern.test($this.val())) {
                $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-email');
                $('.symbol').addClass('checkout-cross-one');
                $('.symbol').addClass('checkout-tick-one');
                validated = false;
            }
        }
    }
    if (validated) {
        $parent.removeClass('woocommerce-invalid woocommerce-invalid-required-field').addClass('woocommerce-validated');
        $('.symbol').addClass('checkout-tick-one');
        $('.symbol').removeClass('checkout-cross-one');
    }
})

Answer 1

JS

if ($('input').hasClass('woocommerce-invalid')) {
    $('#someDiv').addClass('red-cross');
} else {
    $('#someDiv').addClass('green-tick');
}

CSS

.red-cross{
    background-image: url('red-cross.png');
}
.green-tick{
    background-image: url('green-tick.png');
}

Answer 2

Try this :

If input hasClass woocommerce-invalid then in if condition addClass to element for which you want to display red cross icon. But for that you need to add image in class which you adding.

if($('input').hasClass('woocommerce-invalid')) {
    // logic here
} else {
    // logic here
}

Answer 3

jQuery:

$('form')
   .removeClass('invalid')  // remove 'invalid' class from forms
   .filter(':has(.woocommerce-invalid)')  // find forms which have an element with class '.woocommerce-invalid'
   .addClass('invalid');  // add 'invalid' class to these forms

CSS

form { background:url(green-tick.png) 100% 50% no-repeat; }
form.invalid { background-image:url(red-cross.png); }

jsfiddle: http://jsfiddle.net/Pp6wB/1/