Magento 2 Forms

Learn Magento 2 form Validation

https://www.thecoachsmb.com/a-complete-guide-on-magento-2-form-validation/

and

https://magecomp.com/blog/create-custom-form-in-magento-2-frontend/

Here is simple form example that make an ajax call

<?php
/** @var \Mageleap\Customform\Block\Index\Index $block */






?>
<div class="row"></div>

<form id="your-form-id" method="post" action="test.php" data-hasrequired="<?= $escaper->escapeHtmlAttr(__('* Required Fields')) ?>">

    <div class="row">

        <div class="col-md-6">
            <div class="field city required">
                <label class="label" for="city">
                    <span><?= /* @noEscape */ ('city') ?></span>
                </label>
                <div class="control">
                    <input type="text" name="city" title="<?= $escaper->escapeHtmlAttr(__('City')) ?>" class="input-text required-entry" id="city">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="field zip required">
                <label class="label" for="zip">
                    <span>postcode</span>
                </label>
                <div class="control">
                    <input type="text" name="postcode" title="" class="input-text required-entry validate-zip-international" id="zip">
                    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div.message.warning') ?>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-6">

        </div>
    </div>
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action save primary" type="submit" name="submit" value="submit" title="<?= $escaper->escapeHtmlAttr(__('Save Address')) ?>">
                <span><?= $escaper->escapeHtml(__('Save Address')) ?></span>
            </button>
        </div>
        <div class="primary">
            <button class="action save primary cancel" title="Cancel" id="cancelButtonadd">
                <span>Cancel</span>
            </button>
        </div>
    </div>



    <div class="field">
        <label for="country" class="label"><span><?php /* @escapeNotVerified */ echo __('Country') ?></span></label>
        <div class="control">
            <select name="country" id="country" class="input-select" data-validate="{required:true}">
                <?php foreach ($block->getCountries() as $country): ?>
                    <option value="<?php echo $country['value']; ?>"><?php echo $country['label']; ?></option>
                <?php endforeach; ?>
            </select>
        </div>
    </div>
    <div class="field">
        <div class="field">
            <label for="state" class="label"><span><?php /* @escapeNotVerified */ echo __('State') ?></span></label>
            <div class="control">
                <select name="state" id="state" class="input-select" data-validate="{required:true}">
                    <!-- State options will be loaded dynamically via JavaScript -->
                </select>
            </div>
        </div>
    </div>
</form>



<script type="text/x-magento-init">
    {
        "#country": {
            "change": "customForm"
        }
    }
</script>


<script type="text/x-magento-init">
    {
        "#your-form-id": {
            "validation": {}
        }
    }
</script><script type="text/x-magento-init">
    {
        "#country": {
            "change": "customForm"
        }
    }
</script>

<form method="post" action="index.phtml">
    <select name="one" id="one">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="text" id="t" name="t" value=""/>
</form>
<script>
    require(['jquery', 'mage/url'], function ($, urlBuilder) {
        $(document).ready(function () {
            $('#t').on('click', function () {
                // Assigning the jQuery object representing the element with id 't' to the variable 'any'
                var any = $('#t');

                // Now you can use the variable 'any' to perform any further actions
                // For example, you can get the value of the input field and alert it
                var inputValue = any.val();
                alert('The value of the input field is: ' + inputValue);
            });
        });
    });

</script>
<script>
    require(['jquery', 'mage/url'], function($, urlBuilder) {
        $(document).ready(function() {
            $('#country').on('change', function() {
                var countryId = $(this).val();
                if (countryId) {

                    var url = urlBuilder.build('mageleap_customform/index/getstates', { country_id: countryId });
                    $.ajax({
                        url: url,
                        type: 'post',
                        dataType: 'json',
                        data: { country_id: countryId }, // Add this line to pass country ID in data
                        success: function (response) {
                            $('#state').empty();
                            $.each(response.states, function (key, value) {
                                $('#state').append($('<option>', {
                                    value: key,
                                    text: value
                                }));
                            });
                        }
                    });
                } else {
                    alert('Please select a country.');
                }
            });
        });
    });
</script>

Magento 2 default  You can see the list of jquery rules in the lib/web/jquery/jquery.validate.js file and see the list of Magento rules in the lib/web/mage/validation.js file.

Add this code in phtml file

<div class="container">
    <div class="row">
<form id="custom-form" action="<?= $block->getFormActionUrl(); ?>" method="post" enctype="multipart/form-data" data-mage-init='{"validation": {}}'>
    <fieldset class="fieldset">
        <!-- Email Field -->
        <div class="field">
            <label for="email" class="label"><span>Email</span></label>
            <div class="control">
                <input type="email" name="email" id="email" class="input-text" data-validate="{required:true, 'validate-email':true}" />
            </div>
        </div>

        <!-- Date of Birth Field -->
        <div class="field">
            <label for="dob" class="label"><span>Date of Birth</span></label>
            <div class="control">
                <input type="date" name="dob" id="dob" class="input-text" data-validate="{required:true}" />
            </div>
        </div>

        <!-- Country Dropdown Field -->
        <div class="field">
            <label for="country" class="label"><span>Country</span></label>
            <div class="control">
                <select name="country" id="country" class="select" data-validate="{required:true}">
                    <option value="">Select Country</option>
                    <option value="US">United States</option>
                    <option value="CA">Canada</option>
                    <!-- Add more countries as needed -->
                </select>
            </div>
        </div>

        <!-- Password Field -->
        <div class="field">
            <label for="password" class="label"><span>Password</span></label>
            <div class="control">
                <input type="password" name="password" id="password" class="input-text" data-validate="{required:true, 'min-length':6}" />
            </div>
        </div>

        <!-- Checkbox Field -->
        <div class="field choice">
            <label for="terms" class="label"><span>Accept Terms</span></label>
            <div class="control">
                <input type="checkbox" name="terms" id="terms" value="1" data-validate="{required:true}" />
            </div>
        </div>

        <!-- File Upload Field -->
        <div class="field">
            <label for="fileupload" class="label"><span>Upload File</span></label>
            <div class="control">
                <input type="file" name="fileupload" id="fileupload" class="input-file" data-validate="{required:true}" />
            </div>
        </div>

        <!-- Time Field -->
        <div class="field">
            <label for="time" class="label"><span>Time</span></label>
            <div class="control">
                <input type="time" name="time" id="time" class="input-text" data-validate="{required:true}" />
            </div>
        </div>

        <!-- ZIP Code Field -->
        <div class="field">
            <label for="zipcode" class="label"><span>ZIP Code</span></label>
            <div class="control">
                <input type="text" name="zipcode" id="zipcode" class="input-text" data-validate="{required:true, 'validate-zip-international':true}" />
            </div>
        </div>

        <!-- URL Field -->
        <div class="field">
            <label for="url" class="label"><span>Website URL</span></label>
            <div class="control">
                <input type="url" name="url" id="url" class="input-text" data-validate="{required:true, 'validate-url':true}" />
            </div>
        </div>

        <!-- Number Field -->
        <div class="field">
            <label for="number" class="label"><span>Number</span></label>
            <div class="control">
                <input type="number" name="number" id="number" class="input-text" data-validate="{required:true, 'validate-number':true}" />
            </div>
        </div>

        <!-- Digits Field -->
        <div class="field">
            <label for="digits" class="label"><span>Digits</span></label>
            <div class="control">
                <input type="text" name="digits" id="digits" class="input-text" data-validate="{required:true, 'validate-digits':true}" />
            </div>
        </div>

        <!-- Credit Card Field -->
        <div class="field">
            <label for="cc" class="label"><span>Credit Card</span></label>
            <div class="control">
                <input type="text" name="cc" id="cc" class="input-text" data-validate="{required:true, 'validate-cc-number':true}" />
            </div>
        </div>

        <!-- Submit Button -->
        <div class="actions-toolbar">
            <button type="submit" class="action submit primary">
                <span>Submit</span>
            </button>
        </div>
    </fieldset>
</form>
    </div>
</div>

This controller to save and process the form

<?php

namespace Anees\Blog\Controller\Post;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\Exception\LocalizedException;

class Save extends Action
{
    /**
     * Execute method
     */
    public function execute()
    {
        $post = $this->getRequest()->getPostValue();

       
        if (!$post) {
            return $this->resultFactory->create(ResultFactory::TYPE_REDIRECT)->setUrl($this->_redirect->getRefererUrl());
        }

        try {
            // Handle the form submission and validation here
            // Example: $email = $post['email'];

            $this->messageManager->addSuccessMessage(__('Form submitted successfully.'));
        } catch (LocalizedException $e) {
            $this->messageManager->addErrorMessage($e->getMessage());
        } catch (\Exception $e) {
            $this->messageManager->addErrorMessage(__('An error occurred while submitting the form.'));
        }

        return $this->resultFactory->create(ResultFactory::TYPE_REDIRECT)->setUrl($this->_redirect->getRefererUrl());
    }
}

This is block class which define the conroller to save form.

<?php
/**
 * Copyright ©  All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace Anees\Blog\Block\Index;

class Index extends \Magento\Framework\View\Element\Template
{

    /**
     * Constructor
     *
     * @param \Magento\Framework\View\Element\Template\Context  $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function getFormActionUrl(){

        return $this->getUrl('blog/post/save');
    }
}

You will see this after adding code.

Initiating validation

Defining validation rules

There are couple of ways to define validation rules for a form field.

As a data-validate attribute

As a data-validate attribute with arguments

As an attribute

As an attribute with arguments

As a class name

As a class name with arguments

Using data-mage-init

Using data-mage-init with arguments

Examples

Adding the validation for a form

Here are examples of all available ways of validating the form fields.

Get more

Here is detailed valudation rules list

https://developer.adobe.com/commerce/frontend-core/guide/validations/rule-list/