1

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

0

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

0

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.