Form Fields Validation (Sage HTML Forms)

sage
1

In the past, I’ve struggled with client side form validation and getting something setup and working the way I want, easily, alongside HTML Forms Plugin / Sage HTML Forms.

Yesterday I discovered ParsleyJS (https://parsleyjs.org) and it has finally solved the headache for me.
Just thought I would share.

It’s easy to get started and finished.

yarn add parsleyjs

import 'parsleyjs' in app.js

Add data-parsley-validate to each form you want to validate:

<x-html-forms :form="$form" class="flex flex-col" data-parsley-validate>

Set a field as required and use one of the built in validators or create your own:

<div class="w-full mb-8">
    <div class="flex">
      <label for="NAME" class="text-gray-300">Name</label>
    </div>
    <div>
      <input
        name="NAME"
        type="text"
        class="box-border w-full p-4 text-2xl text-gray-300 bg-gray-600 border-pink-700 border-solid focus:border-b-4"
        required
        data-parsley-required-message="Please provide your first name at least :)"
      >
    </div>
  </div>

  <div class="w-full mb-8">
    <div class="flex">
      <label for="email" class="text-gray-300">Email</label>
    </div>
    <div>
      <input
        name="email"
        type="email"
        class="box-border w-full p-4 text-2xl text-gray-300 bg-gray-600 border-pink-700 border-solid focus:border-b-4"
        required
        data-parsley-required-message="Please add an email address so we can respond to you :)"
      >
    </div>
  </div>

image
image1756×650 20.2 KB

That’s it. The documentation goes into great details:

Curious how others are using Sage HTML Forms and creating input validation. Feel free to share.

3 Likes