HTML 5 & Bootstrap Jquery Form Validation Plugin

Overview

HTML 5 & Bootstrap Jquery Form Validation Plugin

HTML 5 & Bootstrap 5 & Jquery 3

jbvalidator is a fresh new jQuery based form validation plugin that is created for the latest Bootstrap 5 framework and supports both client side and server-side validation.

  • Multiple languages.
  • Custom error messages.
  • Custom validation rules.
  • Easy to use via HTML data attribute.

Installation

npm i @emretulek/jbvalidator

Or grab from jsdelivr CDN :

<script src="https://cdn.jsdelivr.net/npm/@emretulek/jbvalidator"></script>
DEMO LINK
  • 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: 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(formSelector = null, event = null): show errors without submitting the form, return error count
  • errorTrigger(inputSelector, message): show the error messages returned from the server.
  • reload(): reload instance after dynamic element is added

Usage

The form's attribute have to novalidate <form novalidate>

<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."
    }
  }
}
Comments
  • Nice Library

    Nice Library

    Thanks for creating a great library, I am having a little trouble with an edge case. I'm using the smart wizard library which breaks large forms into pages of a wizard https://github.com/techlab/jquery-smartwizard

    The problem I am facing is that the validation doesn't kick in until the last page of the wizard when the form is submitted, or if I interact with the form elements.

    So my question to you is how would I manually invoke the validation routine?

    Thanks in advance.

    opened by carlblanchard 7
  • Not Working On Dynamically Added Elements

    Not Working On Dynamically Added Elements

    Everything is good but If I am adding an element dynamically on the page, the pattern validation does not work, and also element is not available in the custom function. Here is my code please review this. let li = '<li class="list-group-item p-0 border-bottom-0" id="tiktok-li"> <div class="input-group social-account-inputs position-relative border-bottom"> <a href="javascript:;" class="input-group-text bg-transparent border-0 p-0"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24px" height="24px"> <g id="surface74321354"> <path style=" stroke:none;fill-rule:nonzero;fill:rgb(80.000001%,80.000001%,80.000001%);fill-opacity:1;" d="M 4.769531 30.398438 C 3.019531 30.398438 1.601562 28.980469 1.601562 27.230469 L 1.601562 4.769531 C 1.601562 3.019531 3.019531 1.601562 4.769531 1.601562 L 27.230469 1.601562 C 28.980469 1.601562 30.398438 3.019531 30.398438 4.769531 L 30.398438 27.230469 C 30.398438 28.980469 28.980469 30.398438 27.230469 30.398438 Z M 26.59375 29.761719 C 28.339844 29.761719 29.761719 28.339844 29.761719 26.59375 L 29.761719 5.40625 C 29.761719 3.660156 28.339844 2.238281 26.59375 2.238281 L 5.40625 2.238281 C 3.660156 2.238281 2.238281 3.660156 2.238281 5.40625 L 2.238281 26.59375 C 2.238281 28.339844 3.660156 29.761719 5.40625 29.761719 Z M 26.59375 29.761719 "/> <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 7.054688 0.601562 C 3.507812 0.601562 0.601562 3.507812 0.601562 7.054688 L 0.601562 24.945312 C 0.601562 28.492188 3.507812 31.398438 7.054688 31.398438 L 24.945312 31.398438 C 28.492188 31.398438 31.398438 28.492188 31.398438 24.945312 L 31.398438 7.054688 C 31.398438 3.507812 28.492188 0.601562 24.945312 0.601562 Z M 7.054688 3.398438 L 24.945312 3.398438 C 26.980469 3.398438 28.601562 5.019531 28.601562 7.054688 L 28.601562 24.945312 C 28.601562 26.980469 26.980469 28.601562 24.945312 28.601562 L 7.054688 28.601562 C 5.019531 28.601562 3.398438 26.980469 3.398438 24.945312 L 3.398438 7.054688 C 3.398438 5.019531 5.019531 3.398438 7.054688 3.398438 Z M 17.398438 6.199219 L 17.398438 20.199219 C 17.398438 21.761719 16.164062 23 14.601562 23 C 13.035156 23 11.800781 21.761719 11.800781 20.199219 C 11.800781 18.636719 13.035156 17.398438 14.601562 17.398438 L 14.601562 14.601562 C 11.523438 14.601562 9 17.125 9 20.199219 C 9 23.277344 11.523438 25.800781 14.601562 25.800781 C 17.675781 25.800781 20.199219 23.277344 20.199219 20.199219 L 20.199219 11.644531 C 21.359375 12.542969 22.734375 13.179688 24.296875 13.199219 L 24.339844 10.398438 C 22.035156 10.367188 20.199219 8.515625 20.199219 6.199219 Z M 17.398438 6.199219 "/> </g> </svg> </a> <input type="hidden" name="social_accounts[followers][]" value="" /> <input type="text" class="form-control common-social-input border-0 pe-2rem" pattern="^\S+$" data-pattern-message="i.e. johndoe" name="social_accounts[url][]" placeholder="username" id="tiktok" value="" required /> <input type="hidden" name="social_accounts[provider][]" value="tiktok"> <a href="javascript:;" class="position-absolute bg-transparent hide-show-icon-position remove-field" data-option-id="tiktok-li" style="z-index: 99;" ><i class='bx bx-x'></i></a> </div> </li>'; $(li).insertAfter('#select-li');

    I use tick backs for li but it does not work on github so I change it to single qoutes. validator.validator.custom = function(el, event) { if ($(el).is('[name="social_accounts[url][]"]')) { console.log($(el)); } } this element does not appear in the console ever however if I add this element on page load it gets perfectly. @emretulek @Mibou @bredecl please look into it

    opened by ateequrrahman97 4
  • data-v-equal hangs page

    data-v-equal hangs page

    Hello, I have a little problem with data-v-equal I have 2 inputs - password and confirm and I want the second to be the same as the first (pretty standart, right...)... When you type in the password and there is nothing in confirm there is no problem but if you have any text in confirm and then type something in password or change the password value the whole page hangs. Something it bounces back and 'wakes up' but it takes a ton of time. You can see the same behaviour in the demo page: https://emretulek.github.io/jbvalidator/ Try filling something in 'equal - rePassword' than start typing in password and it hangs at some point.

    opened by sapabg 3
  • Vertical alignment icons inside input

    Vertical alignment icons inside input

    I use Bootstrap 5 and jbvalidator (https://github.com/emretulek/jbvalidator).

    I want to use icon inside input. Here is the code:

    <div class="input-group mb-3"><i class="ci-user position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
        <input class="form-control rounded-start" type="text" placeholder="Username" required>
    </div>
    

    And here is result: https://i.stack.imgur.com/hRyUQ.jpg

    if the validator marks it as incorrect, it moves the icon down because the vertical centering is set to 50%. Here is result: https://i.stack.imgur.com/IgC9q.jpg

    I don't know how to elegantly center the icon vertically even if an error message is displayed.

    opened by tolki5 2
  • How can we display Custom Error message

    How can we display Custom Error message

    //custom validate method validator.validator.custom = function(el, event){ if($(el).is('[name=password]') && $(el).val().length < 5){ return 'Your password is too weak.'; } } This method only return but it can not display any error on the screen.

    opened by ateequrrahman97 2
  • fix Typo and extend support for floating label

    fix Typo and extend support for floating label

    Hi!

    (First at all this is my first contribution to an external repo).

    I found a wrong typo on the classname for validFeedBackClass. Also found a kind-of-bug when using float labels and the server responses with is-invalid css class, the label 'disappears' from the screen in any form-control, so I made a little fix to give support for it.

    Form returned from server Captura de Pantalla 2021-03-29 a la(s) 16 56 24

    Right option selected Captura de Pantalla 2021-03-29 a la(s) 16 56 31

    With the fix Captura de Pantalla 2021-03-29 a la(s) 16 56 42

    Thanks!

    opened by bredecl 2
  • Issue on checkbox validation using checkAll() method

    Issue on checkbox validation using checkAll() method

    @emretulek please look into it. when I call to checkAll() method manually then I receive this error. jbvalidator.js:303 Uncaught TypeError: Cannot read properties of undefined (reading 'originalEvent') at Function.groupCheckBox (jbvalidator.js:303) at jbvalidator.js:192 at Array.map () at validationRun (jbvalidator.js:190) at HTMLInputElement. (jbvalidator.js:127) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at Object.checkAll (jbvalidator.js:126) at HTMLFormElement. (286:1826) at HTMLFormElement.dispatch (jquery.min.js:2) Screenshot from 2021-11-15 13-12-19 Screenshot from 2021-11-15 13-13-02

    opened by ateequrrahman97 1
  • Add data-v-different validation

    Add data-v-different validation

    I have a standard password change form. It has the following fields: Current Password, New Password and Confirm New Password.

    I added data-v-equal="#new_password" to the Confirm Password field so typing in either of the two fields will trigger the not equal error when the two fields do not match. This works as it should.

    I would like to have the opposite type of validation for the New Password field. An error should be triggered when it matches the Current Password field. I can do this with the following code but the error is triggered only by typing in the New Password field. if ( $('[name=new_password]').val() === $('[name=current_password]').val() ) I'd like the error to be triggered when typing in either the Current Password or the New Password fields.

    Hence my new feature request for data-v-different validation. How can I implement this functionality on my form if you do not feel this feature is necessary?

    opened by jeffshead 1
  • Problem with bootstrap-select

    Problem with bootstrap-select

    I face one problem with bootstrap-select and jbvalidator. When the two plugins are activated, the jbvalidator make the search box of bootstrap-select plugin not working.

    Inked148751291-eae69911-9d9d-4400-b790-a8166e89f4f5_LI

    opened by marlon-pereira 0
Releases(v1.0.9)
jQuery form validation plugin

jQuery.validationEngine v3.1.0 Looking for official contributors This project has now been going on for more than 7 years, right now I only maintain t

Cedric Dugas 2.6k Dec 23, 2022
jQuery library to validate html forms. compatible with bootstrap v4 and bootstrap v3

jQuery form validation jQuery form validation is a library that helps you to validate your HTML form, it's completable with both Bootstrap 3 and Boots

Bassam Nabriss 33 Jun 10, 2021
The best @jquery plugin to validate form fields. Designed to use with Bootstrap + Zurb Foundation + Pure + SemanticUI + UIKit + Your own frameworks.

FormValidation - Download http://formvalidation.io - The best jQuery plugin to validate form fields, designed to use with: Bootstrap Foundation Pure S

FormValidation 2.8k Mar 29, 2021
Facile is an HTML form validator that is inspired by Laravel's validation style and is designed for simplicity of use.

Facile is an HTML form validator that is inspired by Laravel's validation style and is designed for simplicity of use.

upjs 314 Dec 26, 2022
FieldVal - multipurpose validation library. Supports both sync and async validation.

FieldVal-JS The FieldVal-JS library allows you to easily validate data and provide readable and structured error reports. Documentation and Examples D

null 137 Sep 24, 2022
Lightweight JavaScript form validation library inspired by CodeIgniter.

validate.js validate.js is a lightweight JavaScript form validation library inspired by CodeIgniter. Features Validate form fields from over a dozen r

Rick Harrison 2.6k Dec 15, 2022
Cross Browser HTML5 Form Validation.

Validatr Cross Browser HTML5 Form Validation. Getting Started View the documentation to learn how to use Validatr. Changelog Version 0.5.1 - 2013-03-1

Jay Morrow 279 Nov 1, 2022
Lightweight and powerfull library for declarative form validation

Formurai is a lightweight and powerfull library for declarative form validation Features Setup Usage Options Methods Rules Examples Roadmap Features ?

Illia 49 May 13, 2022
jQuery Validation Plugin library sources

jQuery Validation Plugin - Form validation made easy The jQuery Validation Plugin provides drop-in validation for your existing forms, while making al

null 10.3k Jan 3, 2023
jQuery Validation Plugin library sources

jQuery Validation Plugin - Form validation made easy The jQuery Validation Plugin provides drop-in validation for your existing forms, while making al

null 10.3k Jan 3, 2023
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Yogesh Sharma 0 Jan 3, 2022
JQuery-TableToExcel - Light weight jQuery plugin for export HTML table to excel file

tableToExcel Light weight jQuery plugin for export table to excel file Demos Website and demo here: http://tanvirpro.com/all_project/jQueryTableToExce

Tanvir Sarker 4 May 8, 2022
Easy HTML Form Validator

Easy HTML Form Validator

Ali Nazari 314 Dec 26, 2022
Jquery.iocurve - jQuery plugin like Tone Curve on Photoshop or GIMP

jquery.iocurve jQuery plugin like Tone Curve on Photoshop or GIMP. See Official page for more information. Quick start Create HTML and open in your br

null 5 Jul 28, 2022
[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

jQuery Form Validator [DISCONTINUED] Validation framework that let's you configure, rather than code, your validation logic. I started writing this pl

Victor Jonsson 976 Dec 30, 2022
String validation

validator.js A library of string validators and sanitizers. Strings only This library validates and sanitizes strings only. If you're not sure if your

null 20.7k Jan 5, 2023
The most powerful data validation library for JS

joi The most powerful schema description language and data validator for JavaScript. Installation npm install joi Visit the joi.dev Developer Portal f

Sideway Inc. 19.6k Jan 4, 2023
Dead simple Object schema validation

Yup Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existin

Jason Quense 19.2k Jan 2, 2023
Schema-Inspector is an JSON API sanitisation and validation module.

Schema-Inspector is a powerful tool to sanitize and validate JS objects. It's designed to work both client-side and server-side and to be scalable wit

null 494 Oct 3, 2022