Extendable Auto Form Validation Plugin With Validator.js

Preview:

Description:

There are many times that you need to validate form fields by client input like required field, email format, phone number format and so on. To achieve this goal, we need to get the input from client-side, process it, and display error messages.

In this article, I will walk you through using Validator.js library to create your own rapidly extensible and simple auto form validator that allows you to easily validate form fields in a variety of scenarios.

How to use it:

1. Load the needed validator.js library in the document.

<script src="/path/to/cdn/validator.min.js"></script>

2. Download and add the ‘auto_form_validation.js’ script to the page.

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

3. Create your own rules following the Validator.js’ instruction.

var formRules = {
    text: function (value) {
        return value.trim() != "";
    },
    email: function (value) {
        return validator.isEmail(value);
    },
    number: function (value) {
        return validator.isNumeric(value);
    },
    alpha: function (value) {
        return validator.isAlpha(value);
    },
    password: function (value) {
        return validator.isStrongPassword(value, {
            minLength: 8,
            minLowercase: 1,
            minUppercase: 1,
            minNumbers: 1,
            minSymbols: 1,
            returnScore: false,
            pointsPerUnique: 1,
            pointsPerRepeat: 0.5,
            pointsForContainingLower: 10,
            pointsForContainingUpper: 10,
            pointsForContainingNumber: 10,
            pointsForContainingSymbol: 10
        });
    },
    checkbox: function (value) {
        return value == 1;
    },
    radio: function (value) {
        return value == 1;
    },
    url: function (value) {
        return validator.isURL(value);
    },
    json: function (value) {
        return validator.isJSON(value);
    },
    ip: function (value) {
        return validator.isIP(value);
    },
    date: function (value) {
        return validator.isDate(value);
    },
    base64: function (value) {
        return validator.isBase64(value);
    },
    // newRule: function (value) {
    //     return value=="newRule";
    // }
};

4. Add validation rules and customize the error messages using the following HTML data attributes.

<form id="form">
  <div>
    <label>Optional</label>
    <input type="text">
  </div>
  <div>
    <label>Text</label>
    <input data-type="text" data-type-message="Required" type="text">
  </div>
  <div>
    <label>Email</label>
    <input data-type="email" data-type-message="Email Format" type="text">
  </div>
  <div>
    <label>Password</label>
    <input data-type="password" data-type-message="Password Format" type="password">
  </div>
  <div>
    <label>Number</label>
    <input data-type="number" data-type-message="Number Format" type="text">
  </div>
  <div>
    <label>Select</label>
    <select data-type="text" data-type-message="Select Option">
      <option value=""></option>
      <option value="1">one</option>
    </select>
  </div>
  <div>
    <label>Checkbox</label>
    <input data-type="checkbox" data-type-message="Check Required" type="checkbox">
  </div>
  <div>
    <label>Radio</label>
    <div data-type="radio" data-type-message="Choose Option" style="flex-direction: row;align-items: center;">
      <input type="radio" name="nb" value="one">one
      <input type="radio" name="nb" value="two">two
    </div>
  </div>
  <div>
    <label>File</label>
    <input data-type="text" data-type-message="File required" type="file">
  </div>
  <button id="jsSubmit">submit</button>
</form>

5. Apply CSS styles to the invalid input fields.

[data-invalid-input] {
   border: 1px solid #f93154;
}

6. Apply CSS styles to the error messages.

[data-invalid-message] {
  color: #f93154;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
  font-style: italic;
  font-size: 0.8rem;
}