0

我正在尝试执行以下操作，如果一个或多个输入具有"woocommerce-invalid"类显示错误“红十字”图标，否则如果所有字段都已完成，则显示成功“绿色勾号”。

我已经尝试过了，它添加了，"checkout-tick-one"但如果有效或无效，会添加/删除类。

$(".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');
    }
});

我需要它来处理以下内容。

.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');
    }
})

因此，如果一个、两个或三个输入具有 invlaid 类，则无论正确与否，符号将显示刻度或交叉依赖。

我也刚刚尝试过，它似乎可以工作，但是当我单击另一个字段时，即使另一个字段具有无效类，图标也会发生变化。

.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');
    }
})
4

3 回答 3

0

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');
}
于 2013-09-05T09:02:09.607 回答
0

试试这个：

如果输入hasClass woocommerce-invalid，则在 if 条件下将类添加到要为其显示红十字图标的元素。但为此，您需要在添加的类中添加图像。

if($('input').hasClass('woocommerce-invalid')) {
    // logic here
} else {
    // logic here
}
于 2013-09-05T09:02:25.713 回答
0

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/

于 2013-09-05T09:04:35.020 回答