Magento 2 how to validate form on keyup event

In Magento 2 when I got stuck with this problem. I asked at
Magento 2 Forum, Magento StackExchange, StackOverflow. And I did not get any response.

So I came up with this solution and I have posted my answer there also.

Let’s say for example you need to validate customer registration form as customer types. You want to use the events like keyup,change,focusin,focusout etc.

For the solution, all you need to do is add new js using requirejs-config.js. But I created a new module. Module files are as below.

Create app\code\Vky\Core\registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vky_Core',
    __DIR__
);

Create app\code\Vky\Core\etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vky_Core" setup_version="0.0.1"/>
</config>

Create app\code\Vky\Core\view\frontend\requirejs-config.js. (If you don’t want to create a new module you need to add this to your module but replace “Vky_Core” to “YourNameSpace_ModuleName”)

var config = {
    map: {
        '*': {
            vky_customjs:      'Vky_Core/js/vky_custom'
        }
    }
};

Create app\code\Vky\Core\view\frontend\web\js\vky_custom.js. (If you don’t want to create a new module you need to add this to your module)

define([
    "jquery",
    "jquery/ui",
    'mage/validation'
], function($) {
    "use strict";
    console.log('vky_custom.js is loaded!!');
        //creating jquery widget
        $.widget('vky_custom.js', {
            _create: function() {
                this._bind();
            },

            /**
             * Event binding, will monitor change, keyup and paste events.
             * @private
             */
            _bind: function () {
                this._on(this.element, {
                    'change': this.validateField,
                    'keyup': this.validateField,
                    'paste': this.validateField,
                    'click': this.validateField,
                    'focusout': this.validateField,
                    'focusin': this.validateField,
                });
            },

            validateField: function () {
                $.validator.validateSingleElement(this.element);
            },

        });

    return $.vky_custom.js;
});

Now, wherever your register.phtml file is open it. Add few things as below. At the end of the file add this

<script type="text/x-magento-init">
    { ".v-validate": { "Vky_Core/js/vky_custom": {} } }
</script>

And then, for example, you want to validate email. Find input tag for email and add class v-validate. Like this

<input type="email" name="email" autocomplete="email" id="email_address" value="<?= $block->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" class="input-text v-validate" data-validate="{required:true, 'validate-email':true}">

So any input with class v-validate will be validated on events like keyup, change, click, focusout, etc. I added a class to all input tags

For firstname and lastname in register.phtml above this line var dataForm = $('#form-validate'); I added

$('#firstname').addClass('v-validate');
$('#lastname').addClass('v-validate');

That’s all I did to solve my problem. And It works.

Be kind to one another. Take care!