Custom Validation For Checkout Field

Question

I want to add custome validation for example firstname who user can't use number But i don't know why it doesn't work

I have create a module and create a file in view/frontend/web/js/validation.Js with below code :

define([
'jquery',
'jquery/ui',
'jquery/validate',
'mage/translate'
], function($){
    'use strict';
    return function() {
        $.validator.addMethod(
            "myvalidation",
            function(value, element) {
                console.log('Here is Validation');
                //Perform your operation here and return the result true/false.
                return true/false;
            },
            $.mage.__("Your validation message.")
        );
}

});

And another create a requirejs-config.js with below code :

    var config = {
    map: {
        "*": {
            myvalidationMethod: "Vendor_Validation/js/validation"
        }
    }
 }

And override the module-customer > view > frontend > templates > widget > name.phtml with below for firstname:

class="letters-only input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('firstname')) ?>" <?= ($block->getAttributeValidationClass('firstname') == 'required-entry') ? ' data-validate="{required:true,myvalidation:true}"' : '' ?>>

Now as you see i use letters-only and last of the code use myvalidation:true but doesn`t echo in console

Answer 1

Hi dears i solved my problem with bellow steps.

First I created a file in vendor/module/frontend/web/js/validation-mixin.js with below code who works in everyWhere:

  define([
    'jquery'
], function ($) {
    "use strict";
    console.log('this is own');
    return function (validator) {
        $.validator.addMethod(
            'myvalidation',
            function (value) {
                // Some custom validation stuff here
                
                return false;
            },
            $.mage.__('myvalidation')
        );
        return validator;
    }
});

Second in vendor/module/frontend/requirejs-config.Js put below code :

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

}

Third go to installed magento root then run below command in cli

rm -rf pub/static/* && bin/magento se:stat:de -f