Magento 2: add Validation on first name and last name so it only accept text value, not numeric

Question

I want to add validation on first name and last name on registration page, So it only accept text value, not the numeric value.

Please help me how to achieve this in Magento 2 standard recommended way.

Answer 1

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

app\code\Vky\Core\registration.php

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

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>

app\code\Vky\Core\view\frontend\requirejs-config.js

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

app\code\Vky\Core\view\frontend\web\js\vky_custom.js

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');```

• Purushotam Sharma: Please format this answer So it is better readable thanks
• Purushotam Sharma: @ Charlie: Not working for me

Answer 2

Magento 2 First name and Last name is default customer entity available in Native Magento. Once you install Magento 2, Customer first name and last name attribute available.

Firstname and Lastname attribute available with Customer and Customer_address entity type.

customer entity type contains attribute used for registration page and customer form related entity.

customer_address entity types used for billing and shipping form of customer.

You can do it server-side validation and client-side validation using below link.

Validate First name & Last name

Note : in the above link they give an example of giving limit validation. you have to add validation as per your requirement.

I hope it helps!

Answer 3

I have fixed my issue with below solution:-

Extend name.phtml file in your theme as below and add "letters-only" validation:-

app\design\frontend\VendorName\themename\Magento_Customer\templates\widget\name.phtml

First Name:-

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('firstname')) ?>"
 name="<?= $block->escapeHtmlAttr($block->getFieldName('firstname')) ?>"
 value="<?= $block->escapeHtmlAttr($block->getObject()->getFirstname()) ?>"
 title="<?= $block->escapeHtmlAttr($block->getStoreLabel('firstname')) ?>"
 class="letters-only input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('firstname')) ?>" <?php if ($block->getAttributeValidationClass('firstname') == 'required-entry') echo ' data-validate="{required:true}"' ?>>

Last Name:-

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('lastname')) ?>"
 name="<?= $block->escapeHtmlAttr($block->getFieldName('lastname')) ?>"
 value="<?= $block->escapeHtmlAttr($block->getObject()->getLastname()) ?>"
 title="<?= $block->escapeHtmlAttr($block->getStoreLabel('lastname')) ?>"
 class="letters-only input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('lastname')) ?>" <?php if ($block->getAttributeValidationClass('lastname') == 'required-entry') echo ' data-validate="{required:true}"' ?>>

Now "letters-only" validation only accept letter in first name and last name, not numeric value.