{"id":23977,"date":"2025-11-05T11:00:00","date_gmt":"2025-11-05T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23977"},"modified":"2025-11-06T10:13:33","modified_gmt":"2025-11-06T04:43:33","slug":"how-add-javascript-form-validation-hyva-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-add-javascript-form-validation-hyva-magento-2\/","title":{"rendered":"How to Add JavaScript Form Validation in Hyv\u00e4 Magento 2"},"content":{"rendered":"\n

Hyv\u00e4 themes primarily use HTML 5 browser validation. However, there are times when you need more control like displaying custom error messages or implementing complex validation logic. <\/p>\n\n\n\n

Hyv\u00e4 provides a powerful and flexible JavaScript form validation library built on Alpine.js. This guide provides a step-by-step to add JavaScript form validation in Hyv\u00e4 Magento 2 website.<\/p>\n\n\n\n

Step-by-Step Tutorial: JavaScript Form Validation in Hyv\u00e4 Theme<\/h2>\n\n\n\n

You can prepare your validation form using these three steps in your Hyv\u00e4:<\/p>\n\n\n\n

1. <\/strong>Activate the JS Validation Library<\/h3>\n\n\n\n

First load the required JavaScript on the relevant pages to integrate form validation.<\/p>\n\n\n\n

This can be achieved by applying the hyva_form_validation<\/strong> layout handle within your layout XML file.<\/p>\n\n\n\n

XML\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n\u00a0 \u00a0 <body>\n\u00a0 \u00a0 \u00a0 \u00a0 <referenceContainer name=\"content\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <block name=\"my-custom-form\" template=\"My_Module::form.phtml\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <arguments>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <argument name=\"hyva_form_validation\" xsi:type=\"boolean\">true<\/argument>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/arguments>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/block>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/referenceContainer>\n\u00a0 \u00a0 <\/body>\n<\/page><\/pre>\n\n\n\n
2. Initialize the Alpine.js Component<\/h3>\n\n\n\n
Utilize Alpine.js<\/a> to initialize the validation component for your form element. Make sure your basic HTML form contains the below code.<\/p>\n\n\n\n
apply x-data=\"hyva.formValidation($el)\".\n\nHTML\n\n<form x-data=\"hyva.formValidation($el)\" @submit=\"onSubmit\">\n\u00a0 \u00a0 <\/form><\/pre>\n\n\n\n

If you require adding custom logic then you will need to integrate the validation component into your Alpine component.<\/p>\n\n\n\n
HTML\n\n<form x-data=\"{...hyva.formValidation($el), myCustomProperty: 'value'}\" @submit=\"onSubmit\">\n\u00a0 \u00a0 <\/form><\/pre>\n\n\n\n
3. Trigger Validation Events<\/h3>\n\n\n\n
The library offers a streamlined approach to form validation with Alpine.js events integration. Allowing developers to leverage the event-driven architecture of Alpine.js for handling form submissions and validating user input. <\/p>\n\n\n\n
When a form is submitted, or when specific input fields are interacted with, the library hooks into standard Alpine.js events, enabling real-time validation feedback and ensuring data integrity before processing.<\/p>\n\n\n\n
    \n
  • Form Submission<\/strong>: To validate all fields upon form submission, use @submit=”onSubmit” <\/strong>on the <form> tag. The library automatically adds the novalidate attribute to prevent browser validation conflicts.<\/li>\n<\/ul>\n\n\n\n
      \n
    • Individual Fields<\/strong>: For real-time validation as a user interacts with a field, apply an event like @change=”onChange”<\/strong> directly to the <input> element.<\/li>\n<\/ul>\n\n\n\n
      HTML\n\n<div class=\"field field-reserved\">\n\u00a0 \u00a0 <label for=\"email\">Email<\/label>\n\u00a0 \u00a0 <input type=\"email\" name=\"email\" id=\"email\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 @change=\"onChange\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 required>\n<\/div><\/pre>\n\n\n\n
      It’s recommended to use the field-reserved classes<\/strong> on the wrapper div to avoid layout shifts when error messages appear.<\/p>\n\n\n\n
      Defining Validation Rules<\/strong><\/p>\n\n\n\n
      You can define validation rules in two ways:<\/p>\n\n\n\n
        \n
      • HTML5 Attributes<\/strong>: The library automatically picks up native browser constraints like required, minlength, maxlength, pattern, min, max, and step.<\/li>\n\n\n\n
      • data-validate Attribute<\/strong>: For custom rules or multiple rules, use the data-validate attribute.<\/li>\n<\/ul>\n\n\n\n
        Important:<\/strong> The value must be a valid JSON object (keys and string values in double quotes).<\/p>\n\n\n\n
        Here is an example combining both methods:<\/p>\n\n\n\n
        HTML\n\n<div class=\"field field-reserved\">\n\u00a0 \u00a0 <label for=\"username\">Username<\/label>\n\u00a0 \u00a0 <input type=\"text\" id=\"username\" name=\"username\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 required\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data-validate='{\"minlength\": 5, \"maxlength\": 15}'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data-msg-minlength=\"Username must be at least %0 characters long.\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 class=\"input-text\">\n<\/div><\/pre>\n\n\n\n
        You can use the data-msg-minlength attribute to customize the default validation message\u00a0<\/p>\n\n\n\n
        Also, it allows to override any validator’s default message by following the format data-msg-VALIDATOR_NAME.<\/p>\n\n\n\n
         The %0 placeholder will automatically be replaced with the rule’s argument (e.g., “5”).<\/p>\n\n\n\n
        Available Built-in Validators<\/h2>\n\n\n\n
        Hyv\u00e4 includes a set of common validators out of the box.<\/p>\n\n\n\n
        Name<\/strong><\/td>Usage Examples<\/strong><\/td>Note<\/strong><\/td><\/tr>
        required<\/td>required or data-validate='{“required”: true}’<\/td>Uses the browser’s constraint API.<\/td><\/tr>
        minlength<\/td>minlength=”2″ or data-validate='{“minlength”: 2}’<\/td>Uses the browser’s constraint API on text inputs.<\/td><\/tr>
        maxlength<\/td>maxlength=”8″ or data-validate='{“maxlength”: 8}’<\/td>Uses the browser’s constraint API on text inputs.<\/td><\/tr>
        pattern<\/td>pattern=”[A-Z]{5}” or data-validate='{“pattern”: “[A-Z]{5}”}’<\/td>Uses the browser’s constraint API.<\/td><\/tr>
        min<\/td>min=”1″ or data-validate='{“min”: 1}’<\/td>For number inputs.<\/td><\/tr>
        max<\/td>max=”10″ or data-validate='{“max”: 10}’<\/td>For number inputs.<\/td><\/tr>
        step<\/td>step=”2″ or data-validate='{“step”: 2}’<\/td>For number inputs.<\/td><\/tr>
        email<\/td>type=”email” or data-validate='{“email”: true}’<\/td>Uses Magento’s email validation regex.<\/td><\/tr>
        password<\/td>data-validate='{“password”: true}’<\/td>Uses Magento’s password validation regex.<\/td><\/tr>
        equalTo<\/td>data-validate='{“equalTo”: “#password”}’<\/td>Compare the field’s value to another field’s value using a selector.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        Implementing JavaScript form validation in the Hyv\u00e4 theme not only enhances user experience but also ensures data accuracy and security in your Magento 2 store. <\/p>\n\n\n\n
        With Hyv\u00e4\u2019s lightweight and performance-focused architecture, you can easily integrate custom validation logic while keeping your site fast and responsive. <\/p>\n\n\n\n
        Whether it\u2019s improving checkout forms or contact forms, proper validation helps prevent errors and builds customer trust. <\/p>\n\n\n\n
        Start implementing these best practices to make your Hyv\u00e4-based Magento store more reliable and user-friendly.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Hyv\u00e4 themes primarily use HTML 5 browser validation. However, there are times when you need more control like displaying custom error messages or implementing complex…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-23977","post","type-post","status-publish","format-standard","hentry","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23977"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23977\/revisions"}],"predecessor-version":[{"id":24030,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23977\/revisions\/24030"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}