Lightweight Form Validation with Alpine.js and Iodine.js

Modern users expect immediate feedback during form validation. This article demonstrates how Alpine.js and Iodine.js, two lightweight JavaScript libraries, create highly interactive forms with minimal overhead, ideal for small static sites or server-rendered applications (like Rails or Laravel). These libraries avoid the complexity of heavy JavaScript build tools.

We'll build a form with progressively enhanced validation, showcasing the APIs of Alpine.js and Iodine.js. The final form provides instant feedback on invalid inputs.

Introducing Alpine.js and Iodine.js

Alpine.js is a CDN-hosted library, requiring no build steps or dependencies. Its concise documentation and small size (8.36 KB minified and gzipped) make it incredibly efficient. It's described as a jQuery/vanilla JavaScript replacement with Vue-like templating, not a competitor to larger frameworks.

Iodine.js is a micro form validation library designed for easy integration with any frontend framework. It simplifies validation by allowing multiple rules per input field and provides clear error messages.

Iodine.js in Action: A Basic Example

Here's a basic client-side validation example using Iodine.js, fetched via CDN:

// ... (Iodine.js CDN link would go here) ...

Or, using Skypack:

import kingshottIodine from "https://cdn.skypack.dev/@kingshott/iodine";

Remember to use kingshottIodine when importing from Skypack. Iodine's is method checks input validity against specified rules. It returns true for valid input or an error string otherwise.

We'll use HTML data attributes to store validation rules for each input:

<input type="text" name="username" data-rules='["required", "minLength:5"]'>

Vanilla JavaScript handles validation:

let form = document.getElementById("form");
let inputs = [...form.querySelectorAll("input[data-rules]")];

function onSubmit(event) {
  inputs.map((input) => {
    if (Iodine.is(input.value, JSON.parse(input.dataset.rules)) !== true) {
      event.preventDefault();
      input.classList.add("invalid");
    }
  });
}
form.addEventListener("submit", onSubmit);

This basic example lacks user-friendliness. It provides no error messages and doesn't update dynamically.

Enhancing with Alpine.js

Alpine.js improves the user experience. We'll validate on blur or input changes, providing instant feedback without interrupting input. Alpine.js is included via CDN:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.x.x/dist/alpine.min.js" defer></script>

Or, via Skypack:

import alpinejs from "https://cdn.skypack.dev/alpinejs";

We'll manage input state (blurred status and error messages) within Alpine.js components using x-data. A function defines the component data:

Alpine.data("form", form);
Alpine.start();

function form() {
  return {
    username: { errorMessage: '', blurred: false },
    email: { errorMessage: '', blurred: false },
    password: { errorMessage: '', blurred: false },
    passwordConf: { errorMessage: '', blurred: false },
    // ... (functions will be added later) ...
  };
}

x-bind:class conditionally adds the "invalid" class:

<input type="text" name="username" x-bind:class="{ 'invalid': username.errorMessage && username.blurred }" ...>

Reacting to Input Changes

Event listeners update the component's state:

// ... within the 'form' function ...
blur: function(event) {
  let ele = event.target;
  this[ele.name].blurred = true;
  let rules = JSON.parse(ele.dataset.rules);
  this[ele.name].errorMessage = this.getErrorMessage(ele.value, rules);
},
input: function(event) {
  let ele = event.target;
  let rules = JSON.parse(ele.dataset.rules);
  this[ele.name].errorMessage = this.getErrorMessage(ele.value, rules);
},
getErrorMessage: function(value, rules) {
  let isValid = Iodine.is(value, rules);
  if (isValid !== true) {
    return Iodine.getErrorMessage(isValid);
  }
  return '';
},
// ...

Error messages are displayed using x-show and x-text:

<p x-show="username.errorMessage && username.blurred" x-text="username.errorMessage"></p>

The @submit event handler (within the Alpine component) handles form submission:

submit: function(event) {
  let inputs = [...this.$el.querySelectorAll("input[data-rules]")];
  inputs.map((input) => {
    if (Iodine.is(input.value, JSON.parse(input.dataset.rules)) !== true) {
      event.preventDefault();
    }
  });
}

Server-Side Error Handling

To handle server-side errors, we'll store them in a data-server-errors attribute and use x-init to populate the component's state:

<input type="text" name="username" data-server-errors='["Username already exists"]' ...>

The init function in the Alpine component will handle this:

init: function() {
  this.inputElements = [...this.$el.querySelectorAll("input[data-rules]")];
  this.initDomData();
},
initDomData: function() {
  this.inputElements.map((ele) => {
    this[ele.name] = {
      serverErrors: JSON.parse(ele.dataset.serverErrors),
      blurred: false
    };
  });
}

The getErrorMessage function is updated to prioritize server errors:

getErrorMessage: function(ele) {
  if (this[ele.name].serverErrors.length > 0) {
    return this[ele.name].serverErrors[0];
  }
  // ... (rest of the function remains largely the same) ...
}

Handling Interdependent Inputs

For interdependent inputs (e.g., password confirmation), we'll update all error messages on every input change. Iodine's addRule method creates a custom rule:

Iodine.addRule(
  "matchingPassword",
  value => value === document.getElementById("password").value
);
Iodine.messages.matchingPassword = "Password confirmation needs to match password";

The updateErrorMessages function handles this:

updateErrorMessages: function() {
  this.inputElements.map((ele) => {
    this[ele.name].errorMessage = this.getErrorMessage(ele);
  });
},

The getErrorMessage function is refined to only return a message if the input is blurred:

getErrorMessage: function(ele) {
  // ... (server error check) ...
  const error = Iodine.is(ele.value, JSON.parse(ele.dataset.rules));
  if (error !== true && this[ele.name].blurred) {
    return Iodine.getErrorMessage(error);
  }
  return "";
}

Event listeners are moved to the parent form element, using focusout instead of blur:

...

Finally, a fade-in transition is added for visual feedback:

<p x-show="username.errorMessage" x-text="username.errorMessage" x-transition:enter=""></p>

This results in a reactive, reusable, and efficient form validation solution. The provided form function can be reused across multiple forms by configuring the HTML attributes accordingly.

The above is the detailed content of Lightweight Form Validation with Alpine.js and Iodine.js. For more information, please follow other related articles on the PHP Chinese website!