Bootstrap 4 Demo
Bootstrap 4 Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <h3>Bootstrap 4 Form validation</h3> <form id="bs-validate-demo" novalidate> <div class="form-group"> <label for="NameDemo1">First Name:</label> <input type="text" class="form-control col-md-3" id="NameDemo1" aria-describedby="nameHelp" placeholder="Enter First Name" required> <div class="invalid-feedback"> Please enter your first name. </div> </div> <div class="form-group"> <label for="NameDemo2">Last Name:</label> <input type="text" class="form-control col-md-3" id="NameDemo2" aria-describedby="nameHelp" placeholder="Enter Last Name" required> <small id="nameHelp" class="form-text text-muted">Please enter your last name</small> <div class="invalid-feedback"> Last name is also required! </div> </div> <div class="form-group"> <label for="EmailDemo">Your Email:</label> <input type="email" class="form-control col-md-4" id="EmailDemo" placeholder="Enter email" required> <div class="invalid-feedback"> Please Enter a valid email address! </div> </div> <div class="form-group"> <label for="passDemo">Enter Password:</label> <input type="password" class="form-control col-md-2" id="passDemo" aria-describedby="passHelp" placeholder="Password" required> <div class="invalid-feedback"> Enter the correct password! </div> </div> <div class="form-group col-md-2"> <label for="selectDemo">Select Year</label> <select class="form-control" id="selectDemo"> <option>1980</option> <option>1981</option> <option>1982</option> <option>1982</option> <option>....</option> </select> </div> <button type="submit" class="btn btn-dark">Create My Account</button> </form> </div> <script> (function() { 'use strict'; window.addEventListener('load', function() { var form = document.getElementById('bs-validate-demo'); form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }, false); })(); </script> </body> </html>
Bootstrap 4 Form validation
First Name:
Please enter your first name.
Last Name:
Please enter your last name
Last name is also required!
Your Email:
Please Enter a valid email address!
Enter Password:
Enter the correct password!
Select Year
1980
1981
1982
1982
....
Create My Account