HTML 5 & Bootstrap Jquery Form Validation Plugin

HTML 5 & Bootstrap 5 & Jquery 3

GITHUB
  • Html 5 validation
  • 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 mesage

Methods

  • validator: add new custom validation
  • checkAll(): show errors without submitting the form, return error count
  • errorTrigger(): show the error messages returned from the server.
  • reload(): reload instance after dynamic element is added

Usage

        <script src="dist/jbvalidator.min.js"></script>
        <script>
            $(function (){

                let validator = $('form.needs-validation').jbvalidator({
                    errorMessage: true,
                    successClass: true,
                    language: "https://emretulek.github.io/jbvalidator/dist/lang/en.json"
                });

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

                validator.validator.example = function(el, event){
                    if($(el).is('[name=username]') && $(el).val().length < 3){
                        return 'Your username is too short.';
                    }
                }

                //check form without submit
                validator.checkAll(); //return error count

                //reload instance after dynamic element is added
                validator.reload();
            })
        </script>

Serverside validation

You can show the error messages returned from the server. The ".errorTrigger" method can be used for this.

.errorTrigger(element, message)

        <script src="dist/jbvalidator.min.js"></script>
        <script>
            $(function (){

               let validatorServerSide = $('form.validatorServerSide').jbvalidator({
                    errorMessage: true,
                    successClass: false,
                });

                //serverside
                $(document).on('submit', '.validatorServerSide', function(){

                    $.ajax({
                        method:"get",
                        url:"http://jsvalidation.test/test.json",
                        data: $(this).serialize(),
                        success: function (data){
                            if(data.status === 'error') {
                                validatorServerSide.errorTrigger($('[name=username]'), data.message);
                            }
                        }
                    })

                    return false;
                });
            })
        </script>

Options

    {
        language: '', //json file url
        errorMessage: true,
        successClass: false,
        html5BrowserDefault: false,
        validFeedBackClass: 'valid-feedback',
        invalidFeedBackClass: 'invalid-feedback',
        validClass: 'is-valid',
        invalidClass: 'is-invalid'
    }

Language file content

    {
      "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."
        }
      }
    }
The form's attribute have to novalidate <form novalidate>
<input type="email" class="form-control" placeholder="name@example.com" required>
<input type="password" class="form-control" id="password" title="password" required>
  • title: filed name
  • id: equal input selector
<input name="repassword" type="password" class="form-control" data-v-equal="#password" required>
  • data-v-equal: id of the element that should be the same
<select class="form-select" required> </select>
<select class="form-select" multiple data-v-min-select="2" data-v-max-select="3">
  • multiple: multiple select
  • data-v-min-select: minimum selectable count
  • data-v-max-select: maximum selectable count
<textarea class="form-control" minlength="10" maxlength="165"></textarea>

Checkbox group minimum selectable

<div data-checkbox-group data-v-min-select="2" data-v-required> </div>
  • You have to create a parent element. The attributes apply to this parent.
  • data-checkbox-group: parent attribute
  • data-v-min-select: parent attribute, minimum selectable
  • data-v-required: parent attribute, is required
<input type="url" class="form-control" placeholder="http://www" required>
<input type="color" name="color" class="form-control" required>
<input type="text" class="form-control" pattern="[0-9]+" title="Only number." required>
<input type="number" class="form-control" min="10" max="100" required>
<input type="text" class="form-control" data-v-min="10" data-v-max="100">
  • data-v-min: custom minimum number
  • data-v-max: custom maximum number
<input type="text" class="form-control" data-v-min-length="5" data-v-max-length="10">
  • data-v-min-length: custom minimum length
  • data-v-max-length: custom maximum length
<input type="file" class="form-control" data-v-min-size="400" data-v-max-size="450">
  • data-v-min-size: custom minimum file size (byte)
  • data-v-max-size: custom maximum file size (byte)
<input type="date" class="form-control" min="2020-10-20">
<input type="text" class="form-control" minlength="10" data-v-message="Please enter minimum 10 characters" required>
  • data-v-message: This attribute allows you to change the original error message.

Floating labels

Success feedback text
    <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
    </div>
    <div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" minlength="8">
    <label for="floatingPassword">Password</label>
    </div>

    <div class="form-floating">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select example" required>
            <option selected value="">Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <label for="floatingSelect">Works with selects</label>
        <div class="valid-feedback">Success feedback text</div>
    </div>
<input type="text" name="username" class="form-control" required>