A vanilla JavaScript plugin that adds extensible form validation functionalities to your Bootstrap project without third-party JS libraries like jQuery.
How to use it:
1. Load the Bootstrap’s stylesheet and the JavaScript file ‘bootstrap-validate.js’ on the webpage.
<link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap-validate.js"></script>
2. Initialize the Bootstrap validate library and apply a validation rule of your choice to the form field:
<input id="input" type="text" class="form-control">
bootstrapValidate( '#input', 'required:fill out this field' );
3. You’re also allowed to apply multiple validation rules to the same form field.
bootstrapValidate( '#input', 'required:fill out this field|email:Enter a valid email address|min:10:Enter at least 10 Characters|max:300:Enter at max 300 chars' );
4. All available validation rules:
min: (input, min) =>
/**
* @since 1.0.0
* @example 20
* @error Enter at least 20 characters!
* @param min number: Number of minimum characters.
* @description Require a given minimum character count.
*/
gte(input.value.length, parseInt(min)),
max: (input, max) =>
/**
* @since 1.0.0
* @example 42
* @error Please dont enter more than 42 characters!
* @param max number: Number of maximum characters.
* @description Maximum character count required.
*/
lte(input.value.length, parseInt(max)),
email: (input) =>
/**
* @since 1.0.3
* @error Enter a valid email address
* @description Require a valid E-Mail Address.
*/
new RegExp(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
).test(input.value),
required: (input) =>
/**
* @since 1.0.7
* @error Please fill out this field!
* @description Require a field to be filled out.
*/
input.value.length && input.value.length > 0,
url: (input) =>
/**
* @since 1.0.10
* @error Please enter a valid URL!
* @description Require a valid URL.
*/
new RegExp(
/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
).test(input.value),
integer: (input) =>
/**
* @since 1.0.10
* @error Please fill out this input field!
* @description Require a valid integer.
*/
isInteger(Number(input.value)),
numeric: (input) =>
/**
* @since 1.0.10
* @description Require a valid numeric input.
* @error Please only enter numeric characters!
*/
isFinite(Number(input.value)),
alphanum: (input) =>
/**
* @since 1.0.10
* @error Please only enter alphanumeric characters!
* @description Require alphanumeric input, e.g. 0-9 and a-Z.
*/
new RegExp(/^[a-z0-9]+$/i).test(input.value),
ISO8601: (input) =>
/**
* @since v2.1.0
* @error Your input does not match the wanted format YYYY-MM-DD
* @description Validate user input against ISO 8601 Format.
*/
new RegExp(/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])$/).test(input.value),
regex: (input, regex) =>
/**
* @since v2.1.0
* @example ^[a-z]+$
* @param regex regex: Regex to validate
* @error Please fulfill my regex
* @description Test a Regular Expression against an input value
*/
new RegExp(regex).test(input.value),
divisible: (input, number) => {
/**
* @since v2.1.0
* @example 15
* @param number Number: Number to Test
* @error 15 is not divisible by 4.
* @description Test if input number can be divided by given number and the result is an exact whole number.
*/
let lDivisible = false;
const lNumber = Number(input.value);
if (isFinite(lNumber)) {
lDivisible =
new Big(lNumber).mod(new Big(Number(number))).toString() === "0";
}
return lDivisible;
},
contains: (input, string) =>
/**
* @since 1.0.11
* @param string string: String to appear in the Input Element
* @description Require the input to contain a given string.
* @example something
* @error Your text needs to contain something!
*/
input.value.includes(string),
startsWith: (input, string) =>
/**
* @since 1.1.0
* @param string string: String the input value should start with
* @example +49
* @error Your phone number needs to start with +49
* @description Require the input value to start with a given string.
*/
startsWith(input.value, string),
endsWith: (input, string) =>
/**
* @since 1.1.0
* @example UCV
* @error Your Input needs to end with UCV
* @param string string: String the input value should end with
* @description Require the input value to end with a given string.
*/
endsWith(input.value, string),
matches: (input, matchingInput) => {
/**
* @since 1.1.0
* @example #passwordConfirm
* @error Your passwords should match
* @param matchingInput string: The input element to match against
* @description Require the input value to match the given inputs value. Like bootstrapValidate's first Parameter, you can pass a selector or Element.
*/
let lMatchingInput = matchingInput;
if (typeof lMatchingInput.nodeType === "undefined") {
lMatchingInput = document.querySelector(matchingInput);
}
return input.value === lMatchingInput.value;
},
alpha: (input) =>
/**
* @since 1.1.0
* @error You can only input alphabetic characters
* @description Validate only alphabetic characters - a-z, A-Z.
*/
isString(input.value) && new RegExp(/^[a-z]+$/i).test(input.value),
inArray: (input, string) => {
/**
* @since 2.2.0
* @example (ABC, DEF, GHI)
* @param string string: Array String (abc, def, ghi)
* @error Your input must be any of (ABC, DEF, GHI)
* @description Validate if user input is in given array. Similar to contains, but with an array.
*/
const { value } = input;
const array = split(string.replace("(", "").replace(")", "").trim(), ",");
return array.includes(value);
},
Changelog:
v2.2.5 (12/28/2021)
- Security and Documentation Updates
v2.2.5 (09/09/2021)
- Bump dependencies
v2.2.3 (08/10/2021)
- Added support for Bootstrap 5
v2.2.0 (02/26/2019)
- Added new inArray Rule, allowing to validate an input against an array of strings.
The post Vanilla JavaScript Form Validator For Bootstrap 5/4/3 Framework appeared first on CSS Script.