Input Validation Component

A reusable JavaScript class for validating common input fields in web forms, such as email, date, username, and Sri Lankan identity card number (NIC).

Features

• Email validation
• Date validation (YYYY-MM-DD format)
• Username validation (3-20 alphanumeric characters or underscores)
• Sri Lankan NIC validation (9 digits + 1 uppercase letter or 12 digits)
• Dynamic feedback for valid/invalid input
• Reusable static validation methods

Installation

Copy index.js into your project directory.

Usage

1. Import the Validator

Include the script in your HTML:

<script type="module" src="index.js"></script>

Or import in your JavaScript module:

import { Validator } from './index.js';

2. Validate Inputs

Email

import { Validator } from './index.js';

const email = "[email protected]";
if (Validator.isValidEmail(email)) {
  console.log("Valid email");
} else {
  console.log("Invalid email");
}

Date (YYYY-MM-DD)

const date = "2024-06-01";
if (Validator.isValidDate(date)) {
  console.log("Valid date");
}

Username

const username = "user_123";
if (Validator.isValidUsername(username)) {
  console.log("Valid username");
}

Sri Lankan NIC

const nic = "123456789V";
if (Validator.isValidNIC(nic)) {
  console.log("Valid NIC");
}

3. Dynamic Feedback Example

You can use the Validator with input events for real-time feedback:

<input type="text" id="emailInput" placeholder="Enter email" />
<span id="emailFeedback"></span>
<script type="module">
  import { Validator } from './index.js';
  const input = document.getElementById('emailInput');
  const feedback = document.getElementById('emailFeedback');
  input.addEventListener('input', () => {
    if (Validator.isValidEmail(input.value)) {
      feedback.textContent = "Valid email";
      feedback.style.color = "green";
    } else {
      feedback.textContent = "Invalid email";
      feedback.style.color = "red";
    }
  });
</script>

API Reference

Validator.isValidEmail(email: string): boolean

Returns true if the email is valid.

Validator.isValidDate(date: string): boolean

Returns true if the date is in YYYY-MM-DD format and valid.

Validator.isValidUsername(username: string): boolean

Returns true if the username is 3-20 characters, alphanumeric or underscores.

Validator.isValidNIC(nic: string): boolean

Returns true if the NIC matches Sri Lankan format.

License

MIT