Magento2.3.4 Add green border when validation of input is succesfull on Checkout Page

Question

When input is invalid we can see red border and error message below. Is it possible to add green border when input is valid ?

Answer 1

I found a quick solution, it is working amazing

1. create you module or insert following code in theme requirejs-config.js Here the purpose of validation-mixin to extend original mage.validation.

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Expert_Checkout/js/mage/validation-mixin': true
            }   
        }
    }
};

1. validation-mixin.js

define([
    'jquery' ], function ($) {
    'use strict';
    var widgetMixin = {
        _create: function() {
            $(this.element).find('input, textarea, select').on("change keyup", function(e){
              $.validator.validateSingleElement(e.currentTarget)
            });
            return this._super();
        }
    };
    return function (parentWidget) {
        $.widget('mage.validation', parentWidget, widgetMixin);
        return $.mage.validation;
    }; })

Now it will work on all forms and validate field as user type and add class valid on success Or you can add custom class if you want

if($.validator.validateSingleElement(e.currentTarget))
$(e.currentTarget).addClass("no-error")

Thanks