Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Form Validations Example
Keywords : form, bootstrap, bootstrap form, bootstrap forms, bootstrap form examples, bootstrap form group, bootstrap form controls, bootstrap form validations, bootstrap form validations examples
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form Validation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container-fluid bcontent"> <h2>Bootstrap Form Validation</h2> <hr /> <form class="was-validated"> <div class="form-group"> <label for="fname">First Name</label> <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter first name" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter first name.</div> </div> <div class="form-group"> <label for="lname">Last Name</label> <input type="text" class="form-control" id="lname" placeholder="Enter last name" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter last name.</div> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter email.</div> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="chkterms" required> I agree all terms & conditions <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please agree terms & conditions.</div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html>
Click Here to See Result
Result
Previous
Next