Fusion Form Validator and Utilities

Form Validation plugin and fluent chainable DOM manipulation utility methods.

Content

Installation - Getting started
Installation - Note
Usage
Utilities
Configuration Options
About
Creator
Contributors
Acknowledgement
Feedback
Contact

Installation

Bootstrap ^5.x, and Fontawesome ^6.x are required.

No worries, the above requirements are shipped along with the Fusion Form Validator package;
Simply head over to the latest release page and download the assets to stay up to date.

Once the Fusion Utility asset has been downloaded:

The Fusion Utility can be found in the src\js folder.

The dependencies (Bootstrap & Fontawesome) can be found in the plugins folder.

Copy the files / folders in the src and plugins folder to wherever you like in the root of your Web-Project.

Assuming you copied them into plugins folder; the structure in your project should be somewhat like this:

.\Project-root
+-- \plugins*
|   +-- \fontawesome*
|   |   +-- \css
|   |   +-- \js
|   |   +-- \webfonts
|   |
|   +-- \bootstrap*
|   |   +-- \css
|   |   +-- \js
|   |
|   +-- \fb-validator-util*
|   |   +-- \css
|   |   +-- \fonts
|   |   +-- \js
|   |...
+-- index.html
|...

Now all that is left is to add them into your document as so:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fusion Form Util</title>
	
	<!-- [Stylesheets] -->
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
	
	<!-- Fontawesome -->
	<link rel="stylesheet" href="plugins/fontawesome/css/all.css">
	
	<!-- FB-ValidatorUtil CSS -->
	<link rel="stylesheet" href="plugins/fb-validator-util/css/fusion.form.util.css">
	
	<!--[ Scripts ]-->
	<!-- Bootstrap JS -->
	<script defer src="plugins/bootstrap/js/bootstrap.bundle.js"></script>
	
	<!-- FB-FValidatorUtil JS -->
	<script defer src="plugins/fb-validator-util/js/fusion.form.util.js"></script>
	<script defer src="plugins/fb-validator-util/js/init.js"></script>
</head>

<body>
	<!-- Your content goes here -->
</body>
</html>

Note:

To avoid errors:

As dependencies, the bootstrap css and fontawesome css must come before fusion.form.util.css.

The same goes for bootstrap js and fontawesome js (if available); They should come before the fusion.form.util.js.

Usage

Firstly, ensure the stylesheets and scripts are linked in the correct hierarchy as in the above example. If you have problems getting it correctly, just copy the code in the example above and edit.

Out of the box, Fusion Utility and Form Validator ships with init.js file, so you can initialize, configure, and using the Fusion Utility and Form Validator without messing up your other JS codes.
N.B: You can still use the validator in another JS file.

To initialize and configure the validator on a form, you need an <FBUtil> instance of the form.
A utility function is available for getting the <FBUtil> instance of elements.

Built-in function $fs(selector, context) is used to select or fetch the element(s).

The selector parameter selects the element(s) and it accepts either jQuery element Object, NodeList, HTML Element, HTML Collection, the elements tag name, or a CSS selector eg. '#login-form'; as an argument.
The context parameter is an optional element context from which to select the element(s), jQuery element Object, NodeList, HTML Element, HTML Collection, the elements tag name, or a CSS selector as an argument.

Initializing:

Previously, the form elements had to follow the below structure: Assuming the form has id login-form i.e.

<form action="" method="post" id="login-form">
	<div class="form-group">
		<div class="input-group align-items-stretch flex-nowrap">
			<!-- N.B. The form-label-group class below is only for floating label. It is not needed if floating label is not intended. -->
			<div class="form-label-group form-field-group required w-100">
				<input type="email" id="email" class="form-control" placeholder="E-Mail Address">
				<label for="email">E-Mail Address</label>
			</div>
		</div>
		<!--N.B. This div should be empty. Its 'id' should be set to the id of the input, textarea, or select element with Valid appended.-->
		<!-- e.g. if the input element id is email; this div should hav an id emailValid and class valid-text -->
		<div id="emailValid" class="valid-text"></div>
	</div>
	
	<div class="form-group">
		<div class="input-group align-items-stretch flex-nowrap">
			<!-- N.B. The form-label-group class below is only for floating label. It is not needed if floating label is not intended. -->
			<div class="form-label-group form-field-group required w-100">
				<input minlength="8" type="password" id="password" class="form-control" placeholder="Password">
				<label for="password">Password</label>
			</div>
		</div>
		<!-- N.B. This div should be empty. Its 'id' should be set to the id of the input, textarea, or select element with Valid appended. -->
		<!-- e.g. if the input element id is password; this div should hav an id passwordValid and class valid-text -->
		<div id="passwordValid" class="valid-text"></div>
	</div>
	
	<div class="form-group">
		<button type="submit" class="btn btn-sm btn-primary">
			Submit
			<!--<i class="ms-1 fa fa-1x fa-spin fa-spinner-third button-loader"></i>-->
		</button>
		
		<div class="form-message">
			<div class="waiting-text d-none">
				<i class="fa fa-1x fa-exclamation-circle text-danger"></i>
				<span class="text-primary">Please Wait...</span>
			</div>
			<div class="response-text small"></div>
		</div>
	</div>
</form>

Putting it all together we had:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	
	<!-- [Stylesheets] -->
	<!-- Bootstrap -->
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
	
	<!-- Fontawesome -->
	<link rel="stylesheet" href="plugins/fontawesome/css/all.css">
	
	<!-- FB-Formvalidator -->
	<link rel="stylesheet" href="plugins/fb-formvalidator/css/fusion.form.validator.css">
</head>

<body>
	<form action="" method="post" id="login-form">
		<div class="form-group">
			<div class="input-group align-items-stretch flex-nowrap">
				<!-- N.B. The form-label-group class below is only for floating label. It is not needed if floating label is not intended. -->
				<div class="form-label-group form-field-group required w-100">
					<input type="email" id="email" class="form-control" placeholder="E-Mail Address">
					<label for="email">E-Mail Address</label>
				</div>
			</div>
			<!--N.B. This div should be empty. Its 'id' should be set to the id of the input, textarea, or select element with Valid appended.-->
			<!-- e.g. if the input element id is email; this div should hav an id emailValid and class valid-text -->
			<div id="emailValid" class="valid-text"></div>
		</div>
		
		<div class="form-group">
			<div class="input-group align-items-stretch flex-nowrap">
				<!-- N.B. The form-label-group class below is only for floating label. It is not needed if floating label is not intended. -->
				<div class="form-label-group form-field-group required w-100">
					<input minlength="8" type="password" id="password" class="form-control" placeholder="Password">
					<label for="password">Password</label>
				</div>
			</div>
			<!-- N.B. This div should be empty. Its 'id' should be set to the id of the input, textarea, or select element with Valid appended. -->
			<!-- e.g. if the input element id is password; this div should hav an id passwordValid and class valid-text -->
			<div id="passwordValid" class="valid-text"></div>
		</div>
		
		<div class="form-group">
			<button type="submit" class="btn btn-sm btn-primary">
				Submit
				<!--<i class="ms-1 fa fa-1x fa-spin fa-spinner-third button-loader"></i>-->
			</button>
			
			<div class="form-message">
				<div class="waiting-text d-none">
					<i class="fa fa-1x fa-exclamation-circle text-danger"></i>
					<span class="text-primary">Please Wait...</span>
				</div>
				<div class="response-text small"></div>
			</div>
		</div>
	</form>
</body>

<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.js"></script>

<!-- FB-Formvalidator -->
<script src="plugins/fb-fomvalidator/js/fusion.form.util.js"></script>
<script src="plugins/fb-fomvalidator/js/fusion.form.validator.js"></script>
<script src="plugins/fb-fomvalidator/js/init.js"></script>
</html>

But we've made it easier, thus it is now:

<form action="" method="post" id="login-form">
	<div class="form-group">
		<!-- N.B. Optionally if you have an icon to display beside the input add the icon class to it like this -->
		<i class="far fa-envelope icon"></i>
		<!-- N.B. All you need to put is you input and label -->
		<input type="email" id="email" class="form-control" placeholder="E-Mail Address">
		<label for="email">E-Mail Address</label>
	</div>
	
	<div class="form-group">
		<input minlength="8" type="password" id="password" class="form-control" placeholder="Password">
		<label for="password">Password</label>
	</div>
	
	<div class="mb-2">
		<button type="submit" class="btn btn-sm btn-primary">
			Submit
			<!--<i class="ms-1 fa fa-1x fa-spin fa-spinner-third button-loader"></i>-->
		</button>
		<div class="form-message"></div>
	</div>
</form>

Putting it all together we now have:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	
	<!-- [Stylesheets] -->
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
	
	<!-- Fontawesome -->
	<link rel="stylesheet" href="plugins/fontawesome/css/all.css">
	
	<!-- FB-ValidatorUtil CSS -->
	<link rel="stylesheet" href="plugins/fb-validator-util/css/fusion.form.util.css">
	
	<!--[ Scripts ]-->
	<!-- Bootstrap JS -->
	<script defer src="plugins/bootstrap/js/bootstrap.bundle.js"></script>
	
	<!-- FB-FValidatorUtil JS -->
	<script defer src="plugins/fb-validator-util/js/fusion.form.util.js"></script>
	<script defer src="plugins/fb-validator-util/js/init.js"></script>
</head>

<body>
	<form action="" method="post" id="login-form">
		<div class="form-group">
			<!-- N.B. Optionally if you have an icon to display beside the input add the icon class to it like this -->
			<i class="far fa-envelope icon"></i>
			<!-- N.B. All you need to put is you input and label -->
			<input type="email" id="email" class="form-control" placeholder="E-Mail Address">
			<label for="email">E-Mail Address</label>
		</div>
		
		<div class="form-group">
			<input minlength="8" type="password" id="password" class="form-control" placeholder="Password">
			<label for="password">Password</label>
		</div>
		
		<div class="mb-2">
			<button type="submit" class="btn btn-sm btn-primary">
				Submit
				<!--<i class="ms-1 fa fa-1x fa-spin fa-spinner-third button-loader"></i>-->
			</button>
			<div class="form-message"></div>
		</div>
	</form>
</body>
</html>

Instantiating and initializing the validator (in your JS file):

Instantiating and initializing the validator has been made easier and more fluent with chainable methods.
You can now do both and also perform an onSubmit event action all at once. An illustration is given below:

// Instantiate the form:
const _loginForm = $fs('#login-form');

// Set config Options
// N.B. Config options can be passed by reference via variables, or can be passed directly as an anonymous object.
const loginFormConfig = {
	config: {
		showIcons: true,
		validateEmail: true,
		useDefaultStyling: true,
	}
};

// Inintialize the validator on the form with optional config options.
_loginForm.validator.initFormValidation(loginFormConfig).upon('submit', function (e) {
	e.preventDefault();
	/** Your On-Submission Logic goes here **/
	// Fusion Form Util could also manage your form submission Asynchronously. e.g:
	_loginForm.handleFormSubmit().then(resolve => console.log(resolve)).catch(error => console.log(error));
});

Utilities

The Fusion Utility & Form Validator also provides you with Utilities (Functions & Methods) for manipulating DOM elements, handling events, AJAX requests, and other common web development tasks, thereby simplifying and streamlining your development process.

Each of these functions and methods have specific functionalities and are outlined in this section of the documentation.

Utility Functions:
$fs(selector, context):

This function creates a new FBUtil object with a selected element (i.e. Selects the element and wraps it in the FBUtil Wrapper for manipulation with available methods).
It takes two parameters:

selector (required): It can be a string, an iterable object, or an object. It represents the HTML string or iterable used to select the element.

context (optional): It can be a string, an iterable object, an object, or null. It represents the element context to select from. If not provided, the context is set to null.

If the element is found, the function returns a new FBUtil object that wraps the selected element; otherwise, It returns an empty object.
 // Usage example:
 $fs('#login-form'); //
isFunction(value):

This function checks whether the given value is a function.
It takes one parameter:

value (required): It represents the value that needs to be checked if it is a function.

It returns a boolean value indicating whether the given value is a function. If the value is a function, it returns true; otherwise, it returns false.
 // Usage example:
 const myFunc = () => console.log('My Function');

 console.log(isFunction(myFunc)); // Logs `true` to the console
isString(value):

This function checks whether the given value is a string.
It takes one parameter:

value (required): It represents the value that needs to be checked if it is a string.

It returns a boolean value indicating whether the given value is a string. If the value is a string, it returns true; otherwise, it returns false.
 // Usage example:
 const name = 'John Doe';

 console.log(isString(name)); // Logs `true` to the console
isObject(value):

This function checks whether the given value is an object.
It takes one parameter:

value (required): It represents the value that needs to be checked if it is an object.

It returns a boolean value indicating whether the given value is an object. If the value is an object, it returns true; otherwise, it returns false.
 // Usage example:
 const user_details = {
     name: 'John Doe',
     email: 'johndoe@gmail.com',
     phone: '+234 805 000 0000'
 };

 console.log(isObject(user_details)); // Logs `true` to the console
formatNumber(number):

This function formats a given number to two decimal places.
It takes one parameter:

number (required): It represents the number that needs to be formatted.

It returns the formatted number as a string.
 // Usage example:
 const num = formatNumber(2);

 console.log(num); // Logs `2.00` to the console
checkLuhn(input):

This function checks if a given input string passes the Luhn algorithm validation; The Luhn algorithm is commonly used to validate credit card numbers and other identification numbers.
It takes one parameter:

input (required): It represents the input string to be checked using the Luhn algorithm.

It returns a boolean value indicating whether the given input passes the Luhn Algorithm validation. If it passes, it returns true; otherwise, it returns false.
 // Usage example:
 const cardNumber = '452619383218234';
 const cardNumberIsValid = checkLuhn(cardNumber);

 console.log(cardNumberIsValid); // Logs `true` to the console if the input is valid; otherwise it logs `false`
parseBool(value):

This function parses a given value as a boolean.
It takes one parameter:

value (required): It represents the value that needs to be parsed as a boolean.

It returns the boolean value.
 // Usage example:
 const bool = parseBool('yes');

 console.log(bool); // Logs `true` to the console
spaceToComma(value):

This function converts spaces to commas in a given string.
It takes one parameter:

value (required): It represents the string in which spaces should be converted to commas.

It returns the resulting string with spaces converted to commas.
 // Usage example:
 const tagsInput = 'plugin validator fuse boss';
 const tags = spaceToComma(tagsInput);

 console.log(tags); // Logs `plugin, validator, fuse, boss` to the console
titleCase(value):

This function converts spaces to commas in a given string.
It takes two parameters:

value (required): It represents the string to be converted to Title Case.

regExpReplace (optional): It represents the regular expression used for string replacement. By default, it is set to /[-_]/gi, which matches hyphens and underscores.

It returns the replaced string, which represents the converted string in Title Case.
 // Usage example:
 const word = 'convert-this_word';
 const wordTitle = titleCase(word);

 console.log(wordTitle); // Logs `convertThisWord` to the console
canParseJSON(JSONString):

This function checks if a given string or Response object can be parsed as JSON.
It takes one parameters:

JSONString (required): It represents the string or Response object to be checked for JSON parsability.

It returns a boolean value indicating whether the given string is valid JSON. If it is, it returns true; otherwise, it returns false.
// Usage example:
 const jsonString = "[{word: 'parse me.'}]";
 const isValidJSON = canParseJSON(jsonString);

 console.log(isValidJSON); // Logs `true` to the console
newBSAlert(element):

This function creates a new instance of a Bootstrap Modal on the given element with the provided options.
It takes two parameters:

element (required): It represents the element on which the Bootstrap Modal should be instantiated.

options (optional): It represents the options or configuration for the Bootstrap Modal. This parameter is an object containing various settings such as animation, backdrop behavior, etc. Read More

It returns the newly created instance of the Modal class, allowing the user to interact with the Bootstrap Modal functionality.
// Usage example:
 const modalElement = document.querySelector('#example-modal');
 newBsModal(modalElement).show() // Manually opens the Modal
// Read the JS trigers section on the bootstrap site: https://getbootstrap.com/docs/5.2/components/modal/#via-javascript
newBSModal(element, options):

This function creates a new instance of a Bootstrap Alert on the given element.
It takes one parameters:

element (required): It represents the element on which the Bootstrap Alert should be instantiated.

It returns the newly created instance of the Alert class, allowing the you to interact with the Bootstrap Alert functionality.
// Usage example:
 const alertElement = document.querySelector('#alert-div');
 newBsAlert(alertElement).close() // Dismisses the alert
// Read the JS trigers section on the bootstrap site: https://getbootstrap.com/docs/5.2/components/alerts/#javascript-behavior
fetchReq(JSONString):

This function performs a fetch request using the Fetch API. It provides a convenient way to make fetch requests with various options and callbacks.
It supports different HTTP methods, request data, response data types, and allows for the execution of custom functions before sending the request, after completion, on success, and on error.
It takes an Object as its parameter, which contains the following properties:

uri: It represents the URI (Uniform Resource Identifier) or URL of the request.

method: It specifies the HTTP method to be used for the request. The default value is 'get'.

data: It represents the data to be sent with the request. The default value is null.

dataType: It specifies the type of data expected in the response. The default value is 'json'.

beforeSend: It is an optional function that can be executed before sending the request.

onSuccess: It is an optional function that can be executed when the request is successful.

onError: It is an optional function that can be executed when the request encounters an error.

onComplete: It is an optional function that can be executed when the request is completed, regardless of success or failure.

The beforeSend function is executed before the request is sent.

The onSuccess function is executed if the response status code falls within the range 200-299, or 401, 402, 422, 423, 426, 451, 511, and the function is provided.

The onError function is executed if the response status code falls outside the status codes specified in the onSuccess function above, and the function is provided.

The onComplete function is executed once the request is completed, regardless of its success or error status.

N.B: onSuccess(), onError(), and onComplete() has three arguments.
onSuccess() and onComplete() has :- responseData, status, and statusText, while;
onError() has :- err, status, and statusText.

The responseData argument returns the servers' respond data in whatever format is giving while sending the request.

The err argument returns the err data if the server returns an error.

The status argument returns the HTTP status code of the servers' response.

The statusText argument returns the HTTP status text of the servers' response.
 // Usage example:
 const openWeatherAPIKey = '{put_your_api_key_here}', city = 'Port-Harcourt';
 // Signup on https://openweathermap.org to get you API Key

 fetchReq({
 	uri: `https://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${openWeatherAPIKey}`,
 	beforeSend: () => console.log(`Fetching Weather Report for ${city} city.`),
 	onSuccess: (xhr, status, statusText) => console.log(xhr, status, statusText) // Logs the weather report response data, status and status text
 });

Available Config Options:

Regular Expressions regExp config options; For validating associated form fields using given Regular Expression.

Key Configurable Values Default Value Description

name RegExp string '/^([a-zA-Z]{2,255})(\s[a-zA-Z]{2,255}){1,2}$/gi' RegExp string used to validate aname field
if validateName option is set to true

username RegExp string '/^[a-zA-Z]+([_]?[a-zA-Z]){2,255}$/gi' RegExp string used to validate ausername field
if validateUsername option is set to true

email RegExp string '/^\w+([.-]?\w+)*@\w+([.-]?\w{2,3})*(\.\w{2,3})$/gi' RegExp string used to validate anemail field
if validateEmail option is set to true

phone RegExp string '/^(\+\d{1,3}?\s)($\d{3}$\s)?(\d+\s)*(\d{2,3}-?\d+)+$/g' RegExp string used to validate aphone field
if validatePhone option is set to true

cardCVV RegExp string '/[0-9]{3,4}$/gi' RegExp string used to validate acard cvv field
if validateCard option is set to true

cardNumber RegExp string '/^[0-9]+$/gi' RegExp string used to validate acard number field
if validateCard option is set to true

These configuration options are accessible via the regExp sub Object and can be configured as follows:
config = {
 regExp: {
 name: 'value',
 email: 'value',
 phone: 'value',
 }
}
Validation Icons icons config options; Displayed validation icons.

Key Configurable Values Default Value Description

validIcon HTML string '' HTML string to show valid icon (tick or check) when a field is correctly filled.

invalidIcon HTML string '' HTML string to show invalid icon (times or exclamation) when a field has error.

passwordTogglerIcon HTML string '' HTML string to show a toggler icon for the password field.

passwordCapslockAlertIcon HTML string '' HTML string to show alert icon when Capslock state is true.

These configuration options are accessible via the icons sub Object and can configured as follows:
config = {
 icons: {
 validIcon: 'value',
 invalidIcon: 'value',
 passwordTogglerIcon: 'value',
 passwordCapslockAlertIcon: 'value',
 }
}
Validation Texts texts config options; Displayed misc validation texts.

Key Configurable Values Default Value Description

capslock string 'Capslock is on' String to be displayed when CapsLock state is true.

These configuration options are accessible via the texts sub Object and can be configured as follows:
config = {
 texts: {
 capslock: 'value (e.g. Capslock)',
 }
}
Field Validation and validator config config options; For toggling validation state of form field elements and Base state of Validator.

Key Configurable Values Default Value Description

showIcons boolean
true or false true boolean to toggle showing the validation icons on the field elements.

showPassword boolean
true or false true boolean to toggle showing the password type toggler icon.

validateCard boolean
true or false false boolean to toggle Card Number and CVV field validation.

validateName boolean
true or false false boolean to toggle Name field validation.

validateEmail boolean
true or false false boolean to toggle Email field validation.

validatePhone boolean
true or false false boolean to toggle Phone Number field validation.

validatePassword boolean
true or false true boolean to toggle Password field validation
(Mostly used if there is a password confirmation field).

validateUsername boolean
true or false false boolean to toggle Username field validation.

nativeValidation boolean
true or false false boolean to toggle Native HTML Validation on the form.

useDefaultStyling boolean
true or false true boolean to toggle using the validators default styling for the fields. Set to false if it interfares with your set styling.

passwordId string 'password' String that matches theid of the password field.

passwordConfirmId string 'password_confirmation' String that matches theid of the confirm password field.

These configuration options are accessible via the config sub Object and can be configured as follows:
config = {
 config: {
 showPassword: value,
 validateName: value,
 validateEmail: value,
 validatePassword: value,
 useDefaultStyling: value,
 passwordConfirmId: 'value (e.g. confirm_password)'
 }
}

About

Fusion Utility & Form Validator is an easy-to-use JS plugin for front-end form validation and miscellaneous utilities which requires little or no knowledge of JavaScript.
The Fusion Utility & Form Validator is focused on providing utility functions for form validation, manipulating DOM elements, handling events, AJAX requests, and other common web development tasks.
By incorporating this plugin into your projects, you simplify and streamline your development process; It offers an abstraction layer over standard JavaScript APIs, making it easier to perform common operations and tasks. Read through this documentation on how to set it up, and you're ready to go. It's fun to use and hassle-free.

Creator

Contributors

Team member:

ScaletFox ltd

Acknowledgement

Thanks to God Almighty for making this project a possible. Also, a huge thanks to:

ScaletFox ltd
Great Ben
Victor
Omotayo
Jacob
Daniel
And many others for their huge support

Feedback

If you discover a vulnerability or bug within the Fusion Utility and Form Validator, or have an improvement, Please open an issue on the GitHub page or send an e-mail to Bien Nwinate via fusionboltinc@gmail.com. All issues will be promptly addressed.

Contact

E-Mail: fusionboltinc@gmail.com
Whatsapp DM: +234 815 744 9189

Name		Name	Last commit message	Last commit date
Latest commit History 75 Commits
plugins		plugins
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Key	Configurable Values	Default Value	Description
name	*RegExp string*	`'/^([a-zA-Z]{2,255})(\s[a-zA-Z]{2,255}){1,2}$/gi'`	RegExp string used to validate a`name` field if `validateName` option is set to `true`
username	*RegExp string*	`'/^[a-zA-Z]+([_]?[a-zA-Z]){2,255}$/gi'`	RegExp string used to validate a`username` field if `validateUsername` option is set to `true`
email	*RegExp string*	`'/^\w+([.-]?\w+)@\w+([.-]?\w{2,3})(\.\w{2,3})$/gi'`	RegExp string used to validate an`email` field if `validateEmail` option is set to `true`
phone	*RegExp string*	`'/^(\+\d{1,3}?\s)(\(\d{3}\)\s)?(\d+\s)*(\d{2,3}-?\d+)+$/g'`	RegExp string used to validate a`phone` field if `validatePhone` option is set to `true`
cardCVV	*RegExp string*	`'/[0-9]{3,4}$/gi'`	RegExp string used to validate a`card cvv` field if `validateCard` option is set to `true`
cardNumber	*RegExp string*	`'/^[0-9]+$/gi'`	RegExp string used to validate a`card number` field if `validateCard` option is set to `true`

Key	Configurable Values	Default Value	Description
validIcon	*HTML string*	`'<i class="fa far fa-1x fa-check"></i>'`	HTML string to show valid icon (tick or check) when a field is correctly filled.
invalidIcon	*HTML string*	`'<i class="fa far fa-1x fa-exclamation-circle"></i>'`	HTML string to show invalid icon (times or exclamation) when a field has error.
passwordTogglerIcon	*HTML string*	`'<i class="fa fa-eye"></i>'`	HTML string to show a toggler icon for the password field.
passwordCapslockAlertIcon	*HTML string*	`'<i class="fa far fa-exclamation-triangle"></i>'`	HTML string to show alert icon when Capslock state is true.

Key	Configurable Values	Default Value	Description
showIcons	boolean `true` or `false`	`true`	boolean to toggle showing the validation icons on the field elements.
showPassword	boolean `true` or `false`	`true`	boolean to toggle showing the password type toggler icon.
validateCard	boolean `true` or `false`	`false`	boolean to toggle Card Number and CVV field validation.
validateName	boolean `true` or `false`	`false`	boolean to toggle Name field validation.
validateEmail	boolean `true` or `false`	`false`	boolean to toggle Email field validation.
validatePhone	boolean `true` or `false`	`false`	boolean to toggle Phone Number field validation.
validatePassword	boolean `true` or `false`	`true`	boolean to toggle Password field validation (Mostly used if there is a password confirmation field).
validateUsername	boolean `true` or `false`	`false`	boolean to toggle Username field validation.
nativeValidation	boolean `true` or `false`	`false`	boolean to toggle Native HTML Validation on the form.
useDefaultStyling	boolean `true` or `false`	`true`	boolean to toggle using the validators default styling for the fields. Set to false if it interfares with your set styling.
passwordId	*string*	`'password'`	String that matches the`id` of the `password field`.
passwordConfirmId	*string*	`'password_confirmation'`	String that matches the`id` of the `confirm password field`.

License

Bien-Glitch/fusion.form.validator

Folders and files

Latest commit

History

Repository files navigation

Fusion Form Validator and Utilities

Form Validation plugin and fluent chainable DOM manipulation utility methods.

Content

Installation

Once the Fusion Utility asset has been downloaded:

Note:

To avoid errors:

Usage

Initializing:

Instantiating and initializing the validator (in your JS file):

Utilities

Utility Functions:

$fs(selector, context):

isFunction(value):

isString(value):

isObject(value):

formatNumber(number):

checkLuhn(input):

parseBool(value):

spaceToComma(value):

titleCase(value):

canParseJSON(JSONString):

newBSAlert(element):

newBSModal(element, options):

fetchReq(JSONString):

Available Config Options:

Regular Expressions regExp config options; For validating associated form fields using given Regular Expression.

Validation Icons icons config options; Displayed validation icons.

Validation Texts texts config options; Displayed misc validation texts.

Field Validation and validator config config options; For toggling validation state of form field elements and Base state of Validator.

About

Creator

Contributors

Acknowledgement

Feedback

Contact

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 3

Packages 0

Contributors 2

Languages

`$fs(selector, context)`:

`isFunction(value)`:

`isString(value)`:

`isObject(value)`:

`formatNumber(number)`:

`checkLuhn(input)`:

`parseBool(value)`:

`spaceToComma(value)`:

`titleCase(value)`:

`canParseJSON(JSONString)`:

`newBSAlert(element)`:

`newBSModal(element, options)`:

`fetchReq(JSONString)`:

Regular Expressions `regExp` config options; For validating associated form fields using given Regular Expression.

Validation Icons `icons` config options; Displayed validation icons.

Validation Texts `texts` config options; Displayed misc validation texts.

Field Validation and validator `config` config options; For toggling validation state of form field elements and Base state of Validator.

Packages