0

私は次のことをしようとしています.1つ以上の入力に"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');
    }
})

そのため、1 つ、2 つ、または 3 つの入力に無効なクラスがあった場合、正しいかどうかに関係なく、シンボルはティックまたはクロス依存を示します。

私も試してみましたが、うまくいくようですが、別のフィールドをクリックすると、別のフィールドが無効なクラスであってもアイコンが変わります。

.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

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 に答える