balzaclegeek / lightformvalidator

A Light Form Validator written with vanilla JS, no dependencies

Light Form Validator is a light JS plugin written with Vanilla JS, no dependencies, used to make a simple but strong form validation.

Wanna try it?

Great!!! Let's install this plugin

For basic web project

• Include this script in your html code

<script src="https://balzacLeGeek.github.io/lightformvalidator/index.js"></script>

Using NPM / Yarn

Installation steps goes here :)

Documentation

API

• LightValidator instance
• Process Validation
• Console is your friend

new LightValidator(options)

Creates an instance of LightValidator.

• options An options object

{
	id: YOUR_FORM_ID, // Required option
}

validate(callback)

Process the form validation and pass the Serialized form datas to a callback function. If no callback function has provided, Serialized form datas are returned.

Console is your friend

• ❌ Form with id "YOUR_FORM_ID" not found You have provided a wrong id

  

• ❌ Invalid Node Element The given ID doesn't match to any form element.

  

• ❌ Form has error One or more required fields are not valid

  

• 🥳 Everything is OK

  

Usage example

The following HTML code uses boostrap form.

<form id="myForm" novalidate>
  <div class="form-group">
    <label for="name">Fullname</label>
    <input
      type="text"
      name="name"
      id="name"
      class="form-control"
      placeholder="Enter your fullname"
      required
    />
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input
      type="email"
      name="email"
      class="form-control"
      id="email"
      placeholder="Enter email"
      required
    />
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input
      type="password"
      name="password"
      class="form-control"
      id="password"
      placeholder="Password"
      required
    />
  </div>
  <div class="form-group">
    <label for="sexe">Gender</label>
    <div class="custom-control custom-radio custom-control-inline">
      <input
        class="custom-control-input"
        type="radio"
        id="gender-mr"
        name="gender"
        value="mr"
        checked
      />
      <label class="custom-control-label" for="gender-mr">Mr</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input
        class="custom-control-input"
        type="radio"
        id="gender-mme"
        name="gender"
        value="mme"
      />
      <label class="custom-control-label" for="gender-mme">Mme</label>
    </div>
  </div>
  <div class="form-group">
    <label for="langage">langage</label>
    <select class="form-control" name="langage" id="langage">
      <option value="MG">Malagasy</option>
      <option value="FR">French</option>
      <option value="EN">English</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

// Create an instance of the LightValidator
const myForm = new LightValidator('myForm', {
	className: string | default: 'light-validator'
})

// Use validate() method to process validation
myForm.validate().then((datas)  => {
	// Your callback function
	// Ex: Send `datas` object within a POST request
}))

Usage example with custom error

To add a custom error, you need to add data-error attribute to the field.

<div class="form-group">
  <label for="name">Fullname</label>
  <input
    type="text"
    name="name"
    id="name"
    class="form-control"
    placeholder="Enter your fullname"
    data-error="Please enter your name"
    required
  />
</div>

TODO

• [+] Custom error message from a data-error attribute
• Password validation options. false by default
• Password confirmation validation

Credits

Light Form Validator was inspired by an old code of my friend Rado.

Light Form Validator logo fond was picked from Champagne & Limousines (Dafont).

License

MIT