---
title: "How to add Javascript Form Validation in Hyva Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-javascript-form-validation-in-hyva-magento-2"
date: "2023-03-09T06:53:34+05:30"
modified: "2023-08-29T07:23:49+05:30"
author:
  name: "Aadil Popatiya"
  url: "https://dolphinwebsolution.com/"
categories:
  - "Hyva"
word_count: 794
reading_time: "4 min read"
summary: "In this blog post, we will be discussing how to add JavaScript form validation in Hyva Magento 2.

It is important to validate forms in Magento 2 to ensure that the information provided by users ..."
description: "In this blog post, we will be discussing how to add JavaScript form validation in Hyva Magento 2. It is important to validate forms in Magento 2 to ensure th..."
keywords: "Hyva"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to create Custom Product Sliders in Hyva Magento 2 ?"
    url: "https://dolphinwebsolution.com/how-to-create-custom-product-sliders-in-hyva-magento-2"
  - title: "How Much Hyva Website Development Cost?"
    url: "https://dolphinwebsolution.com/blog/hyva-website-developent-cost/"
  - title: "Pros and Cons of the Hyvä Theme for Magento 2"
    url: "https://dolphinwebsolution.com/blog/pros-and-cons-of-the-hyva-theme-for-magento-2/"
---

# How to add Javascript Form Validation in Hyva Magento 2

_Published: March 9, 2023_  
_Author: Aadil Popatiya_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/03/how-to-create-modal-1024x536.png)

In this blog post, we will be discussing how to add JavaScript form validation in Hyva Magento 2.

It is important to validate forms in Magento 2 to ensure that the information provided by users is properly formatted and to prevent spam and malicious submissions.

Hyva primarily uses built-in browser form validation, in some cases, JavaScript validation may be necessary to display custom validation messages in a specific location.

## Here are the steps to validate forms in Hyva Magento 2:

### **Step 1:**  Register your module

Follow this link to create custom module in magento 2

<https://dolphinwebsolution.com/how-to-create-module-in-magento-2>

### **Step 2 :**  Setup your layout

#### *app/code/Dolphin/ValidateHyvaForm/view/frontend/layout/hyva\_dolphin\_index\_index.xml*

```
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="hyva_form_validation"/>

    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="form" template="Dolphin_ValidateHyvaForm::form.phtml" />
    </referenceContainer>

</page>
```

Here we load the advanced form validation on the page by applying the layout handle *hyva\_form\_validation*.

### **Step 3 :**  Create template

#### *app/code/Dolphin/ValidateHyvaForm/view/frontend/templates/form.phtml*

```
    <form class="form" action="<?= $block->escapeHtmlAttr($block->submitFormUrl()) ?>" method="post" autocomplete="off"
          x-data="hyva.formValidation($el)" @submit="onSubmit">

                    <label for="firstname" class="label">
                 <?= $block->escapeHtml(__('First Name:')) ?>             </label>
                            <input type="text" name="firstname" id="firstname" class="w-full form-input"
                       data-validate='{"required": true}'>

                    <label for="firstname" class="label">
                 <?= $block->escapeHtml(__('Last Name:')) ?>             </label>
                            <input type="text" name="lastname" id="lastname" class="w-full form-input"
                       data-validate='{"required": true}'>

                    <label for="email" class="label">
                 <?= $block->escapeHtml(__('Email:')) ?>             </label>
                            <input type="text" name="email" id="email" class="w-full form-input"
                       data-validate='{"required": true , "email": true}' @change="onChange">

                                    <button type="submit"
                        id="inq-submit"
                        class="action submit primary"
                        title="<?= $block->escapeHtmlAttr(__('Submit')) ?>">
                    <?= $block->escapeHtml(__('Submit')) ?>                </button>

    </form>
```

Here we Initialise the form validation Alpine.js component hyva.formValidation($el)

```
<form x-data="hyva.formValidation($el)">
```

If you want to add additional logic, merge the form validation component with your custom component properties.

```
<form x-data="{...initMyCustomComponent(), ...hyva.formValidation($el)}">
```

You can trigger the validation of the whole form using the Alpine.js @submit event with the onSubmit method.

```
<form x-data="hyva.formValidation($el)" @submit="onSubmit">
```

If you want to trigger validation on a change event, use the @change event.

```
    <input name="example" data-validate='{"required": true}' @change="onChange" />
```

If you want to use multiple validation rules in the same element, use a JSON object like this: data-validate='{“min”: 2, “required”: true}’.

```
    <input type="number" data-validate='{"min": 2, "required": true}' />
```

## Available Rule validators in Magento Hyva
[![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2023/03/image_2023_03_09T08_47_44_281Z-1.png)](https://dolphinwebsolution.com/wp-content/uploads/2023/03/image_2023_03_09T08_47_44_281Z-1.png)

You can also add your custom Rule validator in hyva by using the method hyva.formValidation.addRule

## Adding new validation rules
To add a new validation rule, use the hyva.formValidation.addRule method and pass a new validation function.

```
hyva.formValidation.addRule('phone', function(value, options, field, context) {
    const phoneNumber = value.trim().replace(' ', '');
    if (phoneNumber.length !== 10) {
        // return message if validation fails;
        return '<?= $escaper->escapeJs(__("Enter correct phone number, like XXX XXX XXXX")) ?>';
    } else {
        // return true if validation passed
        return true;
    }
});
```

The first argument is the validator name and the second argument is the validator rule callback.

Validation rule functions should return one of the following values.

- The boolean true if the rule is valid.
- A string message if the rule is invalid. The string should describe the failure in a helpful way
- A Promise that resolves to true or a message string when the validation completes.

And that’s it! This is how you can validate forms in Hyva Magento 2. Visit this page for [**Hyva development service**](https://dolphinwebsolution.com/hyva-theme-development).


---

_View the original post at: [https://dolphinwebsolution.com/how-to-add-javascript-form-validation-in-hyva-magento-2](https://dolphinwebsolution.com/how-to-add-javascript-form-validation-in-hyva-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:33:04 UTC_