Basic Live Form Validator For Bootstrap 4

A small and basic form validation plugin for Bootstrap 4 that provides 3 validators (input, email, password) with custom feedback messages for your sign up form.

More Features:

• Developer-friendly. Allows you to customize the validation rules using built-in parameters.
• Auto validates form fields while typing and auto disable submit button when the form is invalid.
• Auto adds/removes valid & invalid classes.
• Shows responsive tiny text below form fields to inform the user of issues.
• Easy to implement without breaking your existing form markup.

Validation Rules:

• Check if your text is too long or short.
• Check if contains unwanted text.
• Check if doesnt contain needed text.
• Ensure that input has at least one number.
• Ensure that there is at least one special character.
• Ensure that there is at least one capital letter.
• Check if passwords matched.
• Use regex to check an email address.

How to use it:

1. To use the form validation plugin, first you need to load jQuery library and Bootstrap 4 framework in the HTML.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Load Validation JS -->
<script src="/path/to/bs4-form-validation.min.js"></script>

2. Initialize the plugin on the form element and you're ready to go.

let form = new Validation("yourForm");

3. Validate a normal text input. Possible parameters:

• inputName: input name
• minLength: min length
• maxLength: max length
• illegalCharArray: an array of unwanted text
• necessaryCharArray: an array of needed text

// form.requireText(inputName, minLength, maxLength, illegalCharArray, necessaryCharArray);
form.requireText("username", 4, 20, [" "], []);

4. Validate an email input. The parameters are the same as the requireText function.

// form.requireEmail(inputName, minLength, maxLength, illegalCharArray, necessaryCharArray);
form.requireEmail("email", 4, 30, [" "], []);

5. Validate a passwork input. The parameters are almost the same as the requireText function. This function requires at least one special character and number in the password. It is also possible to assign a confirmation input using the passConfirmName parameter.

<label for="passwordOne">Password</label>
<input name="passwordOne" type="password" class="form-control" placeholder="Password">
<label for="passwordConfirm">Confirm Password</label>
<input name="passwordConfirm" type="password" class="form-control" placeholder="Confirm Password">

// form.registerPassword(inputName, minLength, maxLength, illegalCharArray, necessaryCharArray, passConfirmName);
form.registerPassword("passwordOne", 6, 20, [" "], [], "passwordConfirm");

---

This awesome jQuery plugin is developed by colmeye. For more Advanced Usages, please check the demo page or visit the official website.