Bootstrap-5-form-validation

Form Validation Using HTML, CSS, JS, Bootstrap, jQuery, and RegEx

by

Bootstrap-5 form validation is a simple example of form validation using BS5, HTML5, CSS3, and Javascript. Further implementation of RegEx to match the pattern. It also uses jQuery. JQuery & ES6 based form validation for Bootstrap 5 which allows you to validate form fields with Regex.

bootstrap validator for bootstrap, bootstrap form validation plugin, jquery form validator, jquery validation plugin example, bootstrap 4 form validation jquery

Features:

  • Grid Model using Bootstrap 5
  • Visual feedback with invalid .is-valid and .is-classes in Bootstrap
  • Category added. Verify that the entries are selected to validate them
  • RegEx validation
    • Name
    • Surname
    • Mobile Phone Number
    • Land Line
    • e-mail
    • IBAN account number
  • Autofill button for validation test
  • Allows a “Submit” button on a fully validated form.

Pre-built rules:

  • First / last name: / ^ [a-z, .’-] + $ / i
  • Date of birth: / ^ [\ d] {2} – [\ d] {2} – [\ d] {4} / i
  • Mobile number: / ^ (\ + | \ d) [0-9] {7,16} $ / i
  • Landline = / ^ 0 [1-6] \ d {1,2} \ d {7} | ^ \ + 31 [1-6] \ d {1,2} \ d {7} / i
  • International Bank Account Number (IBAN)

How to make use of it:

1. Add the CSS class .validate to form fields as follows:

<input id="firstName" class="validate mb-3 form-control" type="text" aria-label="first-name" placeholder="first name">
<input id="lastName" class="validate mb-3 form-control" type="text" placeholder="last name">
<input id="dateOfBirth" class="validate mb-3 form-control" type="text" placeholder="dd-mm-yyyy (date of birth)">
<input id="mobileNumber" class="validate mb-3 form-control" type="text" placeholder="mobile phone">
<input id="landLine" class="validate mb-3 form-control" type="text" placeholder="land line">
<input id="email" class="validate mb-3 form-control" type="text" placeholder="e-mail">
<input id="iban" class="validate mb-3 form-control" type="text" placeholder="IBAN account number">
<button type="button" id="submitButton" class="mb-3 btn btn-outline-success" disabled>Submit</button>

2. Create a suggestions container to hold the success message.

<div class="succes-msg collapse multi-collapse" id="multiCollapseExample1">
  <div class="card card-body">
    You input was validated.
    Great success!
  </div>
</div>

3. Add jQuery library and the Bootstrap-5-form-validation plugin to your Bootstrap 5 web page and complete.

<!-- Bootstrap 5 Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap-5-form-validation -->
<script src="js/main.js"></script>

jQuery & ES6 Form Validation Plugin, Bootstrap-5-form-validation Github, bootstrap form validation example demo, bootstrap form validation jquery, formvalidation io free download

See Demo And Download

Demo
Download

Official Website(skarjan): Click Here

This superior jQuery/javascript plugin is developed by skarjan. For extra Advanced Usages, please go to the official website.

Leave a Comment