Magento2 – Set Customer Group from Registration Form

<?php 
namespace Custom\Customergroup\Observer\Customer;

use Magento\Customer\Api\CustomerRepositoryInterface;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Filesystem;
use Magento\MediaStorage\Model\File\UploaderFactory;

class RegisterSuccess implements \Magento\Framework\Event\ObserverInterface {

    /**
     * @var CustomerRepositoryInterface
     */
    private $customerRepository;

    protected $uploaderFactory;

    protected $fileSystem;

    protected $fileId = 'your_file_id';
    protected $allowedExtensions = ['jpg', 'png'];

    public function __construct(
        \Magento\Framework\App\RequestInterface $request,
        CustomerRepositoryInterface $customerRepository,
        UploaderFactory $uploaderFactory,
        Filesystem $fileSystem
    )
    {
        $this->_request = $request;
        $this->customerRepository = $customerRepository;
        $this->uploaderFactory = $uploaderFactory;
        $this->fileSystem = $fileSystem;
    }

    public function execute(\Magento\Framework\Event\Observer $observer){      

        $id = $observer->getEvent()->getCustomer()->getId();
        $customer = $this->customerRepository->getById($id);
        //get files uploaded
        if (isset($_FILES['fileToUpload']['name']) && $_FILES['fileToUpload']['name'] != "") {
            $destinationPath = $this->getDestinationPath();
            try {
                $uploader = $this->uploaderFactory->create(['fileId' => $this->fileId])
                    ->setAllowCreateFolders(true)
                    ->setAllowRenameFiles(true)
                    ->setAllowedExtensions($this->allowedExtensions);

                if (!$fileData = $uploader->save($destinationPath)) {
                    throw new LocalizedException(
                        __('File cannot be saved to path: $1', $destinationPath)
                    );
                }
                //$fileName = $fileData['file'];
            } catch (\Exception $e) {
                $message = $this->messageManager->addError(
                    __($e->getMessage())
                );
                die;
            }
        } else{
            die('there');
        }

        $this->customerRepository->save($customer);

    }

    public function getDestinationPath()
    {
        return $this->fileSystem
            ->getDirectoryWrite(DirectoryList::MEDIA)
            ->getAbsolutePath('/');
    }
}

After some digging, I came up with this solution. 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.

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

That's all I did to solve my problem. And It works. That's why posting my answer. May be this can help someone.