Real-time form validation in Bootstrap 4 while completing the form

Question

Real-time form validation in Bootstrap 4 while completing the form

After exploring the form validation section in Bootstrap 4.4 (https://getbootstrap.com/docs/4.4/components/forms/#how-it-works), I have successfully integrated the code into my project. The code example and script for triggering validation seem quite impressive!

I've been pondering whether it's feasible to enable this validation while the user is still filling out the form, rather than waiting until they attempt to submit it?

For example, if there are two required input fields - First Name & Last Name, can I validate each field as soon as it's filled out (e.g., changing focus from one field to another)?

In other words, real-time validation?

The current validation method I'm using (activated when clicking the form submit button) is:

function validateForm () {
  var forms = document.getElementsByClassName('needs-validation')
  var validation = Array.prototype.filter.call(forms, function(form) {
    console.log(form.checkValidity())
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()

      // get the "first" invalid field
      var errorElements = document.querySelectorAll('.form-control:invalid')

      // scroll the user to the invalid field
      window.scrollTo(0, getOffset(errorElements[0]).top)

    }
    form.classList.add('was-validated')
  })
}

javascript forms validation bootstrap-4

Answer 1

Answer №1

The checkValidity() function can be applied to individual inputs for validation. By binding the blur event handler to each input, you can add classes is-valid or is-invalid based on the validation results.

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Select all the forms where custom validation styles will be used
    var inputs = document.getElementsByClassName('form-control')

    // Iterate over each input and monitor the blur event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // Reset classes
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

Answer 2

The checkValidity() function can be applied to individual inputs for validation. By binding the blur event handler to each input, you can add classes is-valid or is-invalid based on the validation results.

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Select all the forms where custom validation styles will be used
    var inputs = document.getElementsByClassName('form-control')

    // Iterate over each input and monitor the blur event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // Reset classes
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

Answer 3

Answer №2

To ensure validation upon leaving an input field, you can implement a blur event listener that triggers your function.

const formInputs = document.querySelectorAll("#form input");

formInputs.forEach(input => input.addEventListener("blur", validateInput));

<form id="form">
  <input type="text" placeholder="Enter text here">
  <input type="text" placeholder="Enter more text">
</form>

Answer 4

To ensure validation upon leaving an input field, you can implement a blur event listener that triggers your function.

const formInputs = document.querySelectorAll("#form input");

formInputs.forEach(input => input.addEventListener("blur", validateInput));

<form id="form">
  <input type="text" placeholder="Enter text here">
  <input type="text" placeholder="Enter more text">
</form>

Answer 5

Answer №3

@Samantha P In response to @Dan K's query, I integrated the default Bootstrap code with real-time validation into the @Zim code to prevent form submission if there are any invalid fields. The modified code is shown below:

// Enhancing JavaScript functionality to block form submissions with invalid fields
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Gathering all forms requiring custom Bootstrap validation styles
        var forms = document.getElementsByClassName('needs-validation');
        
        // Looping through forms and halting submission
        var formValidation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    event.preventDefault(); 
                    processForm();
                }
                form.classList.add('was-validated');
            }, false);
        });
        
        // Additional code for checking each input field
        var inputs = document.getElementsByClassName('form-control');
        var inputValidation = Array.prototype.filter.call(inputs, function(input) {
            input.addEventListener('blur', function(event) {
                input.classList.remove('is-invalid');
                input.classList.remove('is-valid');
                if (input.checkValidity() === false) {
                    input.classList.add('is-invalid');
                } else {
                    input.classList.add('is-valid');
                }
            }, false);
        });
        
    }, false); // End of window load event listener
})(); // End of immediately invoked function container

Answer 6

@Samantha P In response to @Dan K's query, I integrated the default Bootstrap code with real-time validation into the @Zim code to prevent form submission if there are any invalid fields. The modified code is shown below:

// Enhancing JavaScript functionality to block form submissions with invalid fields
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Gathering all forms requiring custom Bootstrap validation styles
        var forms = document.getElementsByClassName('needs-validation');
        
        // Looping through forms and halting submission
        var formValidation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    event.preventDefault(); 
                    processForm();
                }
                form.classList.add('was-validated');
            }, false);
        });
        
        // Additional code for checking each input field
        var inputs = document.getElementsByClassName('form-control');
        var inputValidation = Array.prototype.filter.call(inputs, function(input) {
            input.addEventListener('blur', function(event) {
                input.classList.remove('is-invalid');
                input.classList.remove('is-valid');
                if (input.checkValidity() === false) {
                    input.classList.add('is-invalid');
                } else {
                    input.classList.add('is-valid');
                }
            }, false);
        });
        
    }, false); // End of window load event listener
})(); // End of immediately invoked function container

Real-time form validation in Bootstrap 4 while completing the form

Answer №1

Answer №2

Answer №3

Similar questions

Flexible design for both columns and rows

What is the reason behind event bubbling failing to function properly when CSS grid is utilized and elements are placed in the same cell

The PHP file fails to load JavaScript because it requires another JavaScript file to be loaded beforehand

What is the best way to access a component's value from a different component in Vue script?

Guide on Verifying File Existence through URL using JavaScript

Ensuring validation on an input field following the addition of a new field sharing the same class

The website is displaying a strange mix of text and HTML when viewed on a PC

What could be the reason why the AngularJS form is set to read-only

Error 404 encountered while attempting to access dist/js/login in Node.JS bootstrap

Enhancing the aesthetic appeal of a form

To make changes to an item, simply tap on the Catalog number

a dedicated TypeScript interface for a particular JSON schema

Utilize JavaScript in conjunction with encfs for enhanced encryption capabilities

Detecting changes in URL hash using JavaScript - the ultimate guide

Saving an item using localStorage

Developing distinct state values for assigned objects

Firefox triggers VideoJS event 'ended' at the beginning

What is the method for determining the variance between two values?

The setState function has not been called

Creating interactive routes and pages using Next.js and Prisma, embracing dynamic functionality