Javascript Form validation with Alpine.Js and Ionide.Js

réseaux d’échange - Delphine 2012

Many web frameworks proposes backend data validation tool but I think they missing frontend data validation tool, like we have to search and add this functionality.

Data validation on frontend doesn’t replace backend validation but brings a better user experience and prevents too many calls to server which can increase the cost of hosting.

While using Laravel 10 with Livewire, that is a fabulous stack, it miss a frontend validation tool, that why I’m exploring Javascript Form validation with Alpine.Js (bring with Livewire) and Ionide.Js found at Github.

I write here because Ionide.Js involved major rewrite with numerous breaking changes which means that previous articles no longer work completely, but are still a great source of inspiration that you should read:

• Form Validation with Alpine.js and Iodine.js by Dixie Atay on november 2021
• Lightweight Form Validation with Alpine.js and Iodine.js by Hugh Haworth on october 2021

Here is the html form skeleton with Alpine.js attributes:

<div>
  <form id="form" action="/collection/create"
      x-data="formdata()"
      x-on:submit="submit($event)" >
    <div>
      <input x-model="fields.name.value"
        x-on:blur="validateField(fields.name)"
        name="name" type="text" />
      <p class="" x-cloak>
          <span x-text="fields.name.error"></span>
      </p>
    </div>
    <input type="submit" x-bind:disabled="isFormInvalid" />
  </form>
</div>

AlpineJs data is set on the form. The text input and span are mapped respectively on fields.name.value and fields.name.error properties of the data model.

The form submit event is mapped on data’s submit method and the text input blur event on data’s validateField method.

The disabled submit input’s attribute is mapped on data’s isFormInvalid property.

Here is the AlpineJs data model that use IonideJs version 8 :

function formdata() {
    return {
        fields: {
            name: {
                value: null, error: null,
                rules: ["required", "minLength:2"]
            },
        },
        isFormInvalid: true,
        validateField(field) {
            let res = Iodine.assert(field.value, field.rules);
            field.error = res.valid ?
                null :
                res.error
                ;
            this.isFormValid();
        },
        isFormValid(){
            this.isFormInvalid = Object.values(this.fields).some(
                (field) => field.error
            );
            return ! this.isFormInvalid ;
        },
        submit(e) {
            var ok = this.isFormValid();
            if( ! ok )
                e.preventDefault();
            return ok ;
        }
    }
};

The AlpineJs x-on:event.prevent does not work with conditional expression (*discussion on github), so we use the submit* event.

The new IonideJs API is simply Iodine.assert(value, array of rules). Look at the documentation for a complete list of Iodine’s included validation rules.

Many thanks to the community of free coders for all these fabulous tools that feed my daily life ❤