I'd like to add a CSS class to form inputs in checkout when they passed the validation.

Currently an error class appears when validation fails, I just want to add a passed class when validation is OK, or maybe find a way to differenciate not yet filled fields from validated fields.

Any idea ?

| improve this question | | | | |

I suppose there is a better way to do that, but I ended up putting a Magento JS mixin to override the validate function of Magento_Ui/js/form/element/abstract

in requirejs-config.js

config: {
    mixins: {
        'Magento_Ui/js/form/element/abstract': {
            'Vendor_Module/js/form/element/abstract-mixin': true

and in Vendor_Module/js/form/element/abstract-mixin.js

define([], function () {
'use strict';
return function (targetModule) {
    //if targetModule is a uiClass based object
    return targetModule.extend({
        validate: function () {
            var result = this._super(); //call parent method
            if (result.valid) {
                $('#' + result.target.uid).addClass('_valid');
            return result;


I'd have liked to find something prettier, but I find knockout very confusing in the checkout and I can't spend that much time to simply add a CSS class...

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.