Fast Clientside Form Validation with Zephyr Form Validator

ZephyrFormValidator is a lightweight JavaScript library for fast, customizable, client-side form validation.

It features real-time error feedback, custom validation rules, and CSS class toggling for visual states.

How to use it:

1. Download the library and load the zephyr-form-validator.js file in the document.

<script src="ZephyrFormValidator.js"></script>

2. Your form elements need id or name attributes that match the keys you’ll use in the JavaScript configuration. It’s also standard practice to include an empty container element next to each input to display error messages. The library uses this structure to inject errors and apply styling classes. The example below uses Bootstrap classes (form-control, invalid-feedback, is-invalid), but you can adjust this to your own CSS.

<form id="example">
  <div class="mb-3">
    <label for="name" class="form-label">Your Name</label>
    <input
      type="text"
      class="form-control"
      id="name"
      name="name"
      placeholder="Enter your name"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input
      type="text"
      class="form-control"
      id="username"
      name="username"
      placeholder="Enter username"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input
      type="text"
      class="form-control"
      id="email"
      name="email"
      placeholder="Enter email"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input
      type="password"
      class="form-control"
      id="password"
      name="password"
      placeholder="Enter password"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="confirmPassword" class="form-label"
      >Confirm Password</label
    >
    <input
      type="password"
      class="form-control"
      id="confirmPassword"
      name="confirmPassword"
      placeholder="Confirm password"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="age" class="form-label">Age</label>
    <input
      type="number"
      class="form-control"
      id="age"
      name="age"
      placeholder="Enter age"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="phone" class="form-label"
      >Phone Number (017XXXXXXXX)</label
    >
    <input
      type="text"
      class="form-control"
      id="phone"
      name="phone"
      placeholder="e.g. 017XXXXXXXX"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="birthdate" class="form-label"
      >Birthdate (YYYY-MM-DD)</label
    >
    <input
      type="text"
      class="form-control"
      id="birthdate"
      name="birthdate"
      placeholder="e.g. 1990-01-31"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="mb-3">
    <label for="birthdate" class="form-label"
      >Website</label
    >
    <input
      type="text"
      class="form-control"
      id="website"
      name="website"
      placeholder="www.yoursite.com"
    />
    <div class="invalid-feedback"></div>
  </div>
  <div class="d-grid">
    <button type="submit" class="btn btn-primary">
      Submit Form
    </button>
  </div>
</form>

3. Initialize ZephyrFormValidator on your HTML form and define your own validation rules as follows:

• required – Ensures a field contains a value
• min/max – Validates character length limits
• email – Checks for properly formatted email addresses
• url – Validates proper URL formatting
• alpha – Ensures input contains only alphabetic characters
• alphanumeric – Verifies input contains only letters and numbers
• pattern – Validates against custom regular expressions
• range – Ensures numeric inputs fall within specified ranges
• date – Validates dates with custom format support
• equalTo – Ensures input matches another field’s value (for confirmations)

const form = document.getElementById("example");
const validator = new ZephyrFormValidator(form, {
  fields: {
    name: {
      required: {
        value: true
      },
      alphanumeric: {
        value: true
      }
    },
    username: {
      required: {
        value: true,
        message: "The username is required.", //Optional
      },
      alpha: {
        value: true
      },
      min: {
        value: 3,
      },
      max: {
        value: 15,
      },
    },
    email: {
      required: {
        value: true,
      },
      email: {
        value: true,
      },
    },
    password: {
      required: {
        value: true,
      },
      min: {
        value: 8,
      },
      pattern: {
        value: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).+$",
        message:
          "Password must include uppercase, lowercase, number, and special character.",
      },
    },
    confirmPassword: {
      required: {
        value: true,
        message: "Please confirm your password.",
      },
      equalTo: {
        field: "password",
      },
    },
    age: {
      required: {
        value: true,
      },
      range: {
        min: 18,
        max: 60,
      },
    },
    phone: {
      required: {
        value: true,
      },
      pattern: {
        value: "^01[3-9]\d{8}$",
        message:
          "Phone number must be a valid Bangladeshi number (e.g., 017XXXXXXXX).",
      },
    },
    birthdate: {
      required: { value: true, message: "Birthdate is required." },
      date: {
        format: "YYYY-MM-DD",
        message: "Please enter a valid date in YYYY-MM-DD format.",
      },
    },
    website: {
      required: { value: true },
      url: {
        value: true
      }
    },
  },
  validationClasses: {
    isInvalid: {
      input: "is-invalid",
      error: "invalid-feedback",
    },
  },
});

//  Validate the form on submit
form.addEventListener("submit", function (e) {
  e.preventDefault();
  validator.clearErrors();
  const isValid = validator.validate();
  if (isValid) {
    alert("All validations passed!");
    form.reset();
  }
});

FAQs:

Q: How do I style the error messages and invalid inputs?
A: Use the validationClasses option during initialization. Provide the CSS classes you want applied in the isInvalid.input (for the input element) and isInvalid.error (for the error message container) properties. Then, define styles for those classes in your CSS file. For instance, style .is-invalid for the input border and .invalid-feedback to display the error message block with appropriate color.

Q: How does the date validation handle different date parts?
A: The date rule uses a format string (e.g., YYYY-MM-DD). It supports tokens like YYYY, YY, MM, M, DD, D. It parses the input based on this format and checks if the resulting day, month, and year form a valid calendar date.

The post Fast Clientside Form Validation with Zephyr Form Validator appeared first on CSS Script.