Magento 2 has basic validation if the field is not valid. enter image description here

How to add custom validation to the checkout page which will add a green border and an inscription that notifies the user of a successful validation.

enter image description here

1 Answer 1


I found a quick solution, it is working amazing

  1. create you module or insert following code in theme requirejs-config.js
var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Expert_Checkout/js/mage/validation-mixin': true
  1. validation-mixin.js
    'jquery' ], function ($) {
    'use strict';
    var widgetMixin = {
        _create: function() {
            $(this.element).find('input, textarea, select').on("change keyup", function(e){
            return this._super();
    return function (parentWidget) {
        $.widget('mage.validation', parentWidget, widgetMixin);
        return $.mage.validation;
    }; })

Now it will work on all forms and valdate field as user type and add class valid on success



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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