Validate Your Form With jQuery Validation Plugin – jbvalidator


Category: JavaScript Plugins Recommended | June 12, 2021
Author:emretulek
Official Page:Go to website
Last Update:June 11, 2021
License:MIT

Description:

You must be writing custom validation jQuery scripts or might be using some other plugin to validate your forms. Today, I’m sharing with you a new plugin called jbvalidator, is a fresh new plugin which is written in jQuery and created for Bootstrap 5 framework. It does support both server side and client side validation.

jbvalidator features:

  1. It supports multiple languages (en, fr, tr).
  2. You can set custom error messages as per your requirement.
  3. You can create custom validation rules.
  4. Its easy to use with HTML data attributes.

How can I use it?

You can install it via npm.

npm i @emretulek/jbvalidator

with CDN:

<script src="https://cdn.jsdelivr.net/npm/@emretulek/jbvalidator"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Then, add the novalidate in form tag.

<form novalidate> 

Apply the validation rule in HTML form fields as data attributes. Here is the list.

  • data-v-equal: id of the element that should be the same
  • data-v-min-select: multiple selectbox, minimum selectable count
  • data-v-max-select: multiple selectbox, maximum selectable count
  • data-checkbox-group: the parent attribute of group checkbox elements data-v-min-select: parent attribute minimum selectable count
  •  data-v-required: parent attribute required
  • data-v-min: alternative of the min attribute, this can be used for attribute type text
  • data-v-max: alternative of the max attribute, this can be used for attribute type text
  • data-v-min-length: alternative of the minlength attribute
  • data-v-max-length: alternative of the maxlength attribute
  • data-v-min-size: the input type file minimum file size (byte)
  • data-v-max-size: the input type file maximum file size (byte)
  • data-v-message: alternative error message

Then, create your form fields:

<form class="needs-validation row g-3" novalidate>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label>Email address</label>
                        <input type="email" class="form-control" placeholder="[email protected]" required>
                    </div>
                </div>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label for="password">Password</label>
                        <input type="password" name="password" class="form-control" id="password" title="password" required>
                    </div>
                </div>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label for="password">equal - rePassword</label>
                        <input name="repassword" type="password" class="form-control" data-v-equal="#password" required>
                    </div>
                </div>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label>Example select</label>
                        <select class="form-select" required>
                            <option value="">Choose</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label>URL</label>
                        <input type="url" class="form-control" placeholder="http://www" required>
                    </div>
                </div>
                <div class="col-12 bg-light">
                    <div class="p-2">
                        <label>Color</label>
                        <input type="color" name="color" class="form-control" required>
                    </div>
                </div>
                <div class="col-12">
                    <input type="submit" class="btn btn-primary" value="Submit">
                </div>
            </form>

Write following jQuery code to activate the validation plugin.

let validator = $('form.needs-validation').jbvalidator({
    errorMessage: true,
    successClass: true,
    language: "dist/lang/en.json" //change the language file path as per your directory structure.
});

You can Customize the the error messages as per your need in ‘en.json’ file or you create your own locale file.

{
  "maxValue": "Value must be less than or equal to %s.",
  "minValue": "Value must be greater than or equal to %s.",
  "maxLength": "Please lengthen this text to %s characters or less (you are currently using %s characters).",
  "minLength": "Please lengthen this text to %s characters or more (you are currently using %s characters).",
  "minSelectOption": "Please select at least %s options.",
  "maxSelectOption": "Please select at most %s options.",
  "groupCheckBox": "Please select at least %s options.",
  "equal": "This field does not match with %s field.",
  "fileMinSize": "File size cannot be less than %s bytes.",
  "fileMaxSize": "File size cannot be more than %s bytes.",
  "number": "Please enter a number.",
  "HTML5": {
    "valueMissing": {
      "INPUT": {
        "default": "Please fill out this field.",
        "checkbox": "Please check this box.",
        "radio": "Please select one of these options.",
        "file": "Please select a file."
      },
      "SELECT": "Please select an item in the list."
    },
    "typeMismatch": {
      "email": "Please enter an e-mail address.",
      "url": "Please enter a URL."
    },
    "rangeUnderflow": {
      "date": "Value must be %s or later.",
      "month": "Value must be %s or later.",
      "week": "Value must be %s or later.",
      "time": "Value must be %s or later.",
      "datetimeLocale": "Value must be %s or later.",
      "number": "Value must be greater than or equal to %s.",
      "range": "Value must be greater than or equal to %s."
    },
    "rangeOverflow": {
      "date": "Value must be %s or earlier.",
      "month": "Value must be %s or earlier.",
      "week": "Value must be %s or earlier.",
      "time": "Value must be %s or earlier.",
      "datetimeLocale": "Value must be %s or earlier.",
      "number": "Value must be less than or equal to %s.",
      "range": "Value must be less than or equal to %s."
    },
    "stepMismatch": {
      "date": "You can only select every %s. day in the date calendar.",
      "month": "You can only select every %s. month in the date calendar.",
      "week": "You can only select every %s. week in the date calendar.",
      "time": "You can only select every %s. second in the time picker.",
      "datetimeLocale": "You can only select every %s. second in the time picker.",
      "number": "Please enter a valid value. Only %s and a multiple of %s.",
      "range": "Please enter a valid value. Only %s and a multiple of %s."
    },
    "tooLong": "Please lengthen this text to %s characters or less (you are currently using %s characters).",
    "tooShort": "Please lengthen this text to %s characters or more (you are currently using %s characters).",
    "patternMismatch": "Please match the request format. %s",
    "badInput": {
      "number": "Please enter a number."
    }
  }
}

You can customize validation rules as following:

//custom validate methode
        validator.validator.custom = function(el, event){
            if($(el).is('[name=password]') && $(el).val().length < 5){
                return 'Your password is too weak.';
            }
        }