2

How to add custom field in registration form and save in database and add jquery validation in Magento2.2.5?

Any help would be appreciated

  • please check the below given answers magento.stackexchange.com/a/272438/52244 if it match your expectation please mark as valid answer.so if someone else got some concern they can use this valid answer. more help will be appreciated. – Kanhaiya lal Apr 25 at 13:38
  • how are you, please find the below answer magento.stackexchange.com/a/272438/52244 if it's match your expectation then mark it as valid answers so others can use in future if they come to here, without spending much to find answer. hope you got my concern. thanks. – Kanhaiya lal May 3 at 6:21
1

Adding a custom field in customer registration page

first if need then create a custom module follow this link

then need to create a file COMPANY\CUSTOMMODULE\Setup\InstallData.php to creating custom field

<?php

namespace COMPANY\CUSTOMMODULE\Setup;

use Magento\Customer\Model\Customer;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements \Magento\Framework\Setup\InstallDataInterface
{
    private $eavSetupFactory;

    private $eavConfig;

    private $attributeResource;

    /**
     * InstallData constructor.
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
     * @param \Magento\Eav\Model\Config $eavConfig
     * @param \Magento\Customer\Model\ResourceModel\Attribute $attributeResource
     */
    public function __construct(
        \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory,
        \Magento\Eav\Model\Config $eavConfig,
        \Magento\Customer\Model\ResourceModel\Attribute $attributeResource
    )
    {
        $this->eavSetupFactory = $eavSetupFactory;
        $this->eavConfig = $eavConfig;
        $this->attributeResource = $attributeResource;
    }

    /**
     * @param ModuleDataSetupInterface $setup
     * @param ModuleContextInterface $context
     * @throws \Magento\Framework\Exception\AlreadyExistsException
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $customField = "custom_field";
        $customFieldLabel = "Custom Field 1";
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        $eavSetup->removeAttribute(Customer::ENTITY, $customField);

        $attributeSetId = $eavSetup->getDefaultAttributeSetId(Customer::ENTITY);
        $attributeGroupId = $eavSetup->getDefaultAttributeGroupId(Customer::ENTITY);

        $eavSetup->addAttribute(Customer::ENTITY, $customField, [
            // Attribute parameters
            'type' => 'varchar',
            'label' => $customFieldLabel,
            'input' => 'text',
            'required' => true,
            'visible' => true,
            'user_defined' => true,
            'sort_order' => 990,
            'position' => 990,
            'system' => 0,
        ]);

        $attribute = $this->eavConfig->getAttribute(Customer::ENTITY, $customField);
        $attribute->setData('attribute_set_id', $attributeSetId);
        $attribute->setData('attribute_group_id', $attributeGroupId);

        /*
        //You can use this attribute in the following forms
        adminhtml_checkout
        adminhtml_customer // for admin page under customer edit account info
        adminhtml_customer_address
        customer_account_create // for store-front registration page
        customer_account_edit // for store-front after logged-in account edit page
        customer_address_edit
        customer_register_address
        */

        $attribute->setData('used_in_forms', [
            'adminhtml_customer',
            'customer_account_create',
            'customer_account_edit'
        ]);

        $this->attributeResource->save($attribute);
    }
}

wait it will help to just create on DB level and visible in admin-level,

Need to access same custom field in store-front

so create a layout file COMPANY\CUSTOMMODULE\view\frontend\layout\customer_account_create.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="form.additional.info">
            <block class="Magento\Framework\View\Element\Template" name="form_additional_info_customer"
                   template="COMPANY_CUSTOMMODULE::additional.phtml"/>
        </referenceContainer>
    </body>
</page>

and to display field in store-front in registration page, create a phtml file COMPANY\CUSTOMMODULE\view\frontend\templates\additional.phtml

<?php
$customFieldLabel = __("Custom Field 1");
$customField = "custom_field";
?>
<div class="field <?= $customField ?> required">
    <label class="label" for="<?= $customField ?>">
        <span><?= $block->escapeHtml($customFieldLabel) ?></span>
    </label>
    <div class="control">
        <input type="text" name="<?= $customField ?>" id="<?= $customField ?>" value=""
               title="<?= $block->escapeHtmlAttr($customFieldLabel) ?>"
               class="input-text" data-validate="{required:true}">
    </div>
</div>

after added these files or code

run below commands :

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy (for developer mode add -f to command)

php bin/magento cache:clear

For JS validation : In above phtml file (COMPANY\CUSTOMMODULE\view\frontend\templates\additional.phtml), if you need to add custom validation then use Magento Validation classes to data-validate attribute.

More help for JS validation follow this link

Note : COMPANY\CUSTOMMODULE is the custom module, if you need you can change with your custom module.

Hope this will help you.

0

Step 1 : Add your input field

            <div class="field required">
                <label for="username" class="label"><span><?php /* @escapeNotVerified */
                        echo __('Username') ?></span></label>
                <div class="control">
                    <input type="text" name="username" id="username"
                           maxlength="50"
                           title="<?php /* @escapeNotVerified */
                           echo __('Username') ?>"
                           class="input-text"
                           data-validate="{'maxlength':50, required:true, 'validateUsername':true}">
                </div>
            </div>

Step 2: Add jQuery validation in the template.

<script>
    requirejs([
        'jquery',
        'jquery/ui',
        'jquery/validate',
        'mage/translate',
        'mage/mage',
    ], function ($) {
        $.validator.addMethod(
            'validateUsername',
            function (value) {
                return value.match(/^[a-zA-Z0-9-_@.]+$/);
            },
            $.mage.__('Enter a valid username. Valid characters are A-Z a-z 0-9 . _ - @.')
        );
    });
</script>

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.