YouTip

We can use different validation classes to set up form validation. .was-validated or .needs-validation added to the element, input fields will have green (valid) or red (invalid) border effects to indicate whether the form requires input. .valid-feedback or .invalid-feedback class is used to tell the user what information is missing, or what needs to be completed before submitting the form. ## Example Use .was-validated class to show what needs to be filled in the form before submission: Submit [Try it yourself »](#) ## Example Use .needs-validation, which will validate missing content after the form is submitted. Some JavaScript code needs to be added to make it work: Submit // Disable form submission if validation fails (function() { 'use strict'; window.addEventListener('load', function() { // Get form validation styles var forms = document.getElementsByClassName('needs-validation'); // Loop and disable submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); [Try it yourself »](#)