Basic
========== HTML==========<form class="simple-example" action="javascript:void(0);" novalidate> <div class="form-row"> <div class="col-md-12 mb-4"> <label for="fullName">Full Name</label> <input type="text" class="form-control" id="fullName" placeholder="" value="" required> <div class="valid-feedback"> Looks good! </div> <div class="invalid-feedback"> Please fill the name </div> </div> </div> <button class="btn btn-primary submit-fn mt-2" type="submit">Submit form</button></form>
=============== Javascript===============window.addEventListener('load', function() {// Fetch all the forms we want to apply custom Bootstrap validation styles tovar forms = document.getElementsByClassName('simple-example');var invalid = $('.simple-example .invalid-feedback');// Loop over them and prevent submissionvar validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); invalid.css('display', 'block'); } else { invalid.css('display', 'none'); form.classList.add('was-validated'); } }, false);});}, false);
=============== HTML===============<form class="email" novalidate action="javascript:void(0);"> <div class="form-row"> <div class="col-md-12 mb-4"> <label for="e_mail">Email</label> <input type="email" class="form-control" id="e_mail" placeholder="" required> <div class="valid-feedback"> Looks good! </div> <div class="invalid-feedback"> Please fill the Email </div> </div> </div> <button class="btn btn-primary mb-4 mt-2" type="submit">Submit form</button></form>
=============== Javascript===============window.addEventListener('load', function() {// Fetch all the forms we want to apply custom Bootstrap validation styles tovar forms = document.getElementsByClassName('email');var invalid = $('.email .invalid-feedback');// Loop over them and prevent submissionvar validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); invalid.css('display', 'block'); } else { invalid.css('display', 'none'); form.classList.add('was-validated'); } }, false);});}, false);
Select
=============== HTML===============<form class="select mt-4" novalidate action="javascript:void(0);"> <div class="form-row"> <div class="col-md-12"> <div id="select_menu" class="form-group mb-4"> <select class="custom-select" required> <option value="">Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="valid-feedback">Example valid custom select feedback</div> <div class="invalid-feedback"> Please Select the field </div> </div> </div> </div> <button class="btn btn-primary mt-2" type="submit">Submit form</button></form>
=============== Javascript===============window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('select'); var invalid = $('.select .invalid-feedback'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); invalid.css('display', 'block'); } else { invalid.css('display', 'none'); form.classList.add('was-validated'); } }, false); }); }, false);
Custom styles
=============== HTML===============<form class="needs-validation" novalidate action="javascript:void(0);"> <div class="form-row"> <div class="col-md-4 mb-4"> <label for="validationCustom01">First name</label> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Shaun" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4 mb-4"> <label for="validationCustom02">Last name</label> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Park" required> <div class="valid-feedback"> Looks good! </div> </div> <div class="col-md-4 mb-4"> <label for="validationCustomUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">@</span> </div> <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required> <div class="invalid-feedback"> Please choose a username. </div> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-4"> <label for="validationCustom03">City</label> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-4"> <label for="validationCustom04">State</label> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-4"> <label for="validationCustom05">Zip</label> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <div class="form-group mb-4"> <div class="form-check pl-0"> <div class="custom-control custom-checkbox checkbox-success"> <input type="checkbox" class="custom-control-input" id="invalidCheck" required> <label class="custom-control-label" for="invalidCheck">Agree to terms and conditions</label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> </div> </div> <button class="btn btn-primary mt-3" type="submit">Submit form</button></form>
=============== Javascript===============window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent 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);
Browser defaults
=============== HTML===============<form> <div class="form-row"> <div class="col-md-4 mb-4"> <label for="validationDefault01">First name</label> <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Shaun" required> </div> <div class="col-md-4 mb-4"> <label for="validationDefault02">Last name</label> <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Park" required> </div> <div class="col-md-4 mb-4"> <label for="validationDefaultUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend2">@</span> </div> <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-4"> <label for="validationDefault03">City</label> <input type="text" class="form-control" id="validationDefault03" placeholder="City" required> </div> <div class="col-md-3 mb-4"> <label for="validationDefault04">State</label> <input type="text" class="form-control" id="validationDefault04" placeholder="State" required> </div> <div class="col-md-3 mb-4"> <label for="validationDefault05">Zip</label> <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required> </div> </div> <div class="form-group mb-4"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="invalidCheck2" required> <label class="custom-control-label" for="invalidCheck2">Agree to terms and conditions</label> <div class="invalid-feedback"> Agree to terms and conditions </div> </div> </div> <button class="btn btn-primary mt-3" type="submit">Submit form</button></form>
Tooltips
=============== HTML===============<form class="needs-validation" novalidate action="javascript:void(0);"> <div class="form-row"> <div class="col-md-4 mb-5"> <label for="validationTooltip01">First name</label> <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Shaun" required> <div class="valid-tooltip"> Looks good! </div> </div> <div class="col-md-4 mb-5"> <label for="validationTooltip02">Last name</label> <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Park" required> <div class="valid-tooltip"> Looks good! </div> </div> <div class="col-md-4 mb-5"> <label for="validationTooltipUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> </div> <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required> <div class="invalid-tooltip"> Please choose a unique and valid username. </div> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-5"> <label for="validationTooltip03">City</label> <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required> <div class="invalid-tooltip"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-5"> <label for="validationTooltip04">State</label> <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required> <div class="invalid-tooltip"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-5"> <label for="validationTooltip05">Zip</label> <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required> <div class="invalid-tooltip"> Please provide a valid zip. </div> </div> </div> <button class="btn btn-primary mt-2" type="submit">Submit form</button></form>
=============== Javascript===============window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent 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);
Copyright © 2020 DesignReset, All rights Reserved .
Coded with