Post
Ask Question

How To Validate HTML 5 Form Elements In Bootstrap 4

Introduction

 
In this article. I will demonstrate you how to validate HTML 5 textbox, textarea, select, checkbox, radio button and file upload using bootstrap 4. Validation provides valuable, actionable feedback to your users with HTML 5 form validation available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
 
Important point to be remember when you form validation
  1. HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
  2. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
  3. As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
  4. Due to constraints in how CSS works, we cannot (at present) apply styles to a <label>that comes before a form control in the DOM without the help of custom JavaScript.
  5. All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
  6. Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
  7. You may provide custom validity messages with setCustomValidity in JavaScript.
Custom styles in bootstrap 4
 
For custom Bootstrap form validation messages, you’ll need to add the novalidate Boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
 
To use Bootstrap 4 form validation in your project, you need to have the following downloaded or cdn link scripts,
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>    
JavaScript require for form validation
  1. <script type="text/javascript">  
  2.         (function () {  
  3.             'use strict';  
  4.             window.addEventListener('load', function () {  
  5.                 var form = document.getElementById('needs-validation');  
  6.                 form.addEventListener('submit', function (event) {  
  7.                     if (form.checkValidity() === false) {  
  8.                         event.preventDefault();  
  9.                         event.stopPropagation();  
  10.                     }  
  11.                     form.classList.add('was-validated');  
  12.                 }, false);  
  13.             }, false);  
  14.         })();  
  15. </script>  
Bootstrap 4 form validation example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>form validation</title>  
  5.     <meta charset="utf-8" />  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>   
  9.    <script type="text/javascript">  
  10.         (function () {  
  11.             'use strict';  
  12.             window.addEventListener('load', function () {  
  13.                 var form = document.getElementById('needs-validation');  
  14.                 form.addEventListener('submit', function (event) {  
  15.                     if (form.checkValidity() === false) {  
  16.                         event.preventDefault();  
  17.                         event.stopPropagation();  
  18.                     }  
  19.                     form.classList.add('was-validated');  
  20.                 }, false);  
  21.             }, false);  
  22.         })();  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <div class="container py-5">  
  27.         <div class="row">  
  28.             <div class="offset-md-2 col-md-8 offset-md-2">  
  29.                 <div class="card">  
  30.                     <div class="card-header bg-primary text-white">  
  31.                         <h4 class="card-title text-uppercase">Employee Form</h4>  
  32.                     </div>  
  33.                     <div class="card-body">  
  34.                         <form id="needs-validation" novalidate>  
  35.                             <div class="row">  
  36.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  37.                                     <div class="form-group">  
  38.                                         <label for="firstname">First Name</label>  
  39.                                         <input type="text" id="firstname" placeholder="First Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  40.                                         <div class="invalid-feedback">  
  41.                                             Please enter first name.  
  42.                                         </div>  
  43.                                     </div>  
  44.                                 </div>  
  45.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  46.                                     <div class="form-group">  
  47.                                         <label for="lastname">Last Name</label>  
  48.                                         <input type="text" id="lastname" placeholder="Last Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  49.                                         <div class="invalid-feedback">  
  50.                                             Please enter last name.  
  51.                                         </div>  
  52.                                     </div>  
  53.                                 </div>  
  54.                             </div>  
  55.                             <div class="row">  
  56.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  57.                                     <div class="form-group">  
  58.                                         <label for="Gender">Gender</label>  
  59.                                         <select class="custom-select" required>  
  60.                                             <option value="">Select Gender</option>  
  61.                                             <option value="1">Male</option>  
  62.                                             <option value="2">Female</option>  
  63.                                         </select>  
  64.                                         <div class="invalid-feedback">Please choose gender</div>  
  65.                                     </div>  
  66.                                 </div>  
  67.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  68.                                     <div class="form-group">  
  69.                                         <label for="email">Email address</label>  
  70.                                         <input type="email" class="form-control" id="email" placeholder="email address" aria-describedby="inputGroupPrepend" required>  
  71.                                         <div class="invalid-feedback">  
  72.                                             Please provide a valid email.  
  73.                                         </div>  
  74.                                     </div>  
  75.                                 </div>  
  76.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  77.                                     <div class="form-group">  
  78.                                         <label for="phonenumber">Mobile Number</label>  
  79.                                         <input type="tel" pattern="^\d{10}$" class="form-control" id="phonenumber" placeholder="Mobile Number" aria-describedby="inputGroupPrepend" required>  
  80.                                         <div class="invalid-feedback">  
  81.                                             Please enter 10 digit mobile number.  
  82.                                         </div>  
  83.                                     </div>  
  84.                                 </div>  
  85.                             </div>  
  86.                             <div class="row">  
  87.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  88.                                     <div class="form-group">  
  89.                                         <label>Mandatory Skills</label>                                          
  90.                                     </div>  
  91.                                     <div class="form-check-inline">  
  92.                                         <div class="custom-control custom-radio ">  
  93.                                             <input type="radio" class="custom-control-input" id="html" aria-describedby="inputGroupPrepend" name="radio-html" required>  
  94.                                             <label class="custom-control-label" for="html">HTML 5</label>  
  95.                                             <div class="invalid-feedback">Choose skill</div>  
  96.                                         </div>                                          
  97.                                     </div>  
  98.                                     <div class="form-check-inline">  
  99.                                         <div class="custom-control custom-radio ">  
  100.                                             <input type="radio" class="custom-control-input" id="javascript" aria-describedby="inputGroupPrepend" name="radio-javascript" required>  
  101.                                             <label class="custom-control-label" for="javascript">JavaScript</label>  
  102.                                             <div class="invalid-feedback">Choose skill</div>  
  103.                                         </div>  
  104.                                     </div>  
  105.                                     <div class="form-check-inline">  
  106.                                         <div class="custom-control custom-radio ">  
  107.                                             <input type="radio" class="custom-control-input" id="csharp" aria-describedby="inputGroupPrepend" name="radio-csharp" required>  
  108.                                             <label class="custom-control-label" for="csharp">C# Programming</label>  
  109.                                             <div class="invalid-feedback">Choose skill</div>  
  110.                                         </div>  
  111.                                     </div>  
  112.                                     <div class="form-check-inline">  
  113.                                         <div class="custom-control custom-radio">  
  114.                                             <input type="radio" class="custom-control-input" id="aspdotnet" aria-describedby="inputGroupPrepend" name="radio-aspdotnet" required>  
  115.                                             <label class="custom-control-label" for="aspdotnet">ASP.NET</label>  
  116.                                             <div class="invalid-feedback">Choose skill</div>  
  117.                                         </div>  
  118.                                     </div>  
  119.                                     <div class="form-check-inline">  
  120.                                         <div class="custom-control custom-radio">  
  121.                                             <input type="radio" class="custom-control-input" id="MVC" name="radio-MVC" required>  
  122.                                             <label class="custom-control-label" for="MVC">ASP.NET MVC</label>  
  123.                                             <div class="invalid-feedback">Choose skill</div>  
  124.                                         </div>  
  125.                                     </div>                                    
  126.                                 </div>  
  127.                             </div>  
  128.                             <div class="row">  
  129.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  130.                                     <div class="form-group">  
  131.                                         <label>Profile Picture</label>  
  132.                                         <div class="custom-file">  
  133.                                             <input type="file" class="custom-file-input" id="validatedCustomFile" required>  
  134.                                             <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>  
  135.                                             <div class="invalid-feedback">Choose file for upload</div>  
  136.                                         </div>  
  137.                                     </div>                                  
  138.                                 </div>  
  139.                             </div>  
  140.                             <div class="row">  
  141.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  142.                                     <div class="form-group">  
  143.                                         <label for="address">Address</label>  
  144.                                         <textarea class="form-control" rows="3" id="address" aria-describedby="inputGroupPrepend" required></textarea>  
  145.                                         <div class="invalid-feedback">please enter address</div>  
  146.                                     </div>  
  147.                                 </div>  
  148.                             </div>  
  149.                             <div class="row">  
  150.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  151.                                     <div class="form-group">  
  152.                                         <div class="form-check">  
  153.                                             <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>  
  154.                                             <label class="form-check-label" for="invalidCheck">  
  155.                                                 Agree to terms and conditions  
  156.                                             </label>  
  157.                                             <div class="invalid-feedback">  
  158.                                                 You must agree before submitting.  
  159.                                             </div>  
  160.                                         </div>  
  161.                                     </div>  
  162.                                 </div>  
  163.                             </div>  
  164.                             <div class="row">  
  165.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  166.                                     <div class="float-right">  
  167.                                         <button class="btn btn-danger rounded-0" type="submit">Cancel</button>  
  168.                                         <button class="btn btn-primary rounded-0" type="submit">Register</button>  
  169.                                     </div>                            
  170.                                 </div>  
  171.                             </div>  
  172.                         </form>  
  173.                     </div>  
  174.                 </div>  
  175.             </div>  
  176.         </div>  
  177.     </div>  
  178. </body>  
  179. </html>  
Output
 
Screenshot-1
 
Output 
 
Screenshot-2
 
Output 
 
Screenshot-3
 
 Output
 
Tooltips
 
If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
 
Bootstrap form validation with tooltips example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>form validation</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         (function () {  
  11.             'use strict';  
  12.             window.addEventListener('load', function () {  
  13.                 var form = document.getElementById('needs-validation');  
  14.                 form.addEventListener('submit', function (event) {  
  15.                     if (form.checkValidity() === false) {  
  16.                         event.preventDefault();  
  17.                         event.stopPropagation();  
  18.                     }  
  19.                     form.classList.add('was-validated');  
  20.                 }, false);  
  21.             }, false);  
  22.         })();  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <div class="container py-5">  
  27.         <div class="row">  
  28.             <div class="offset-md-2 col-md-8 offset-md-2">  
  29.                 <div class="card">  
  30.                     <div class="card-header bg-primary text-white">  
  31.                         <h4 class="card-title text-uppercase">Employee Form</h4>  
  32.                     </div>  
  33.                     <div class="card-body">  
  34.                         <form id="needs-validation" novalidate>  
  35.                             <div class="row">  
  36.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  37.                                     <label for="firstName">First Name</label>  
  38.                                     <input type="text" class="form-control" id="firstName" placeholder="First Name" required>  
  39.                                     <div class="invalid-tooltip">  
  40.                                         Please enter first name.  
  41.                                     </div>  
  42.                                 </div>  
  43.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  44.                                     <label for="lastName">Last Name</label>  
  45.                                     <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>  
  46.                                     <div class="invalid-tooltip">  
  47.                                         Please enter last name.  
  48.                                     </div>  
  49.                                 </div>  
  50.                             </div>  
  51.                             <div class="row">  
  52.                                  <div class="col-sm-4 col-md-4 col-xs-12">  
  53.                                      <label for="Gender">Gender</label>  
  54.                                      <select class="custom-select" required>  
  55.                                          <option value="">Select Gender</option>  
  56.                                          <option value="1">Male</option>  
  57.                                          <option value="2">Female</option>  
  58.                                      </select>  
  59.                                      <div class="invalid-tooltip">Please choose gender</div>  
  60.                                  </div>  
  61.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  62.                                     <label for="email">Email address</label>  
  63.                                     <input type="email" class="form-control" id="email" placeholder="email address" aria-describedby="inputGroupPrepend" required>  
  64.                                     <div class="invalid-tooltip">  
  65.                                         Please provide a valid email.  
  66.                                     </div>  
  67.                                 </div>  
  68.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  69.                                     <label for="phonenumber">Mobile Number</label>  
  70.                                     <input type="tel" pattern="^\d{10}$" class="form-control" id="phonenumber" placeholder="Mobile Number" aria-describedby="inputGroupPrepend" required>  
  71.                                     <div class="invalid-tooltip">  
  72.                                         Please enter 10 digit mobile number.  
  73.                                     </div>  
  74.                                 </div>  
  75.                             </div>  
  76.                             <div class="row">  
  77.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  78.                                     <div class="form-group">  
  79.                                         <label>Mandatory Skills</label>  
  80.                                     </div>  
  81.                                     <div class="form-check-inline">  
  82.                                         <div class="custom-control custom-radio ">  
  83.                                             <input type="radio" class="custom-control-input" id="html" aria-describedby="inputGroupPrepend" name="radio-html" required>  
  84.                                             <label class="custom-control-label" for="html">HTML 5</label>  
  85.                                             <div class="invalid-tooltip">Choose skill</div>  
  86.                                         </div>  
  87.                                     </div>  
  88.                                     <div class="form-check-inline">  
  89.                                         <div class="custom-control custom-radio ">  
  90.                                             <input type="radio" class="custom-control-input" id="javascript" aria-describedby="inputGroupPrepend" name="radio-javascript" required>  
  91.                                             <label class="custom-control-label" for="javascript">JavaScript</label>  
  92.                                             <div class="invalid-tooltip">Choose skill</div>  
  93.                                         </div>  
  94.                                     </div>  
  95.                                     <div class="form-check-inline">  
  96.                                         <div class="custom-control custom-radio ">  
  97.                                             <input type="radio" class="custom-control-input" id="csharp" aria-describedby="inputGroupPrepend" name="radio-csharp" required>  
  98.                                             <label class="custom-control-label" for="csharp">C# Programming</label>  
  99.                                             <div class="invalid-tooltip">Choose skill</div>  
  100.                                         </div>  
  101.                                     </div>  
  102.                                     <div class="form-check-inline">  
  103.                                         <div class="custom-control custom-radio">  
  104.                                             <input type="radio" class="custom-control-input" id="aspdotnet" aria-describedby="inputGroupPrepend" name="radio-aspdotnet" required>  
  105.                                             <label class="custom-control-label" for="aspdotnet">ASP.NET</label>  
  106.                                             <div class="invalid-tooltip">Choose skill</div>  
  107.                                         </div>  
  108.                                     </div>  
  109.                                     <div class="form-check-inline">  
  110.                                         <div class="custom-control custom-radio">  
  111.                                             <input type="radio" class="custom-control-input" id="MVC" name="radio-MVC" required>  
  112.                                             <label class="custom-control-label" for="MVC">ASP.NET MVC</label>  
  113.                                             <div class="invalid-tooltip">Choose skill</div>  
  114.                                         </div>  
  115.                                     </div>  
  116.                                 </div>  
  117.                             </div>  
  118.                             <div class="row">  
  119.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  120.                                     <div class="form-group">  
  121.                                         <label>Profile Picture</label>  
  122.                                         <div class="custom-file">  
  123.                                             <input type="file" class="custom-file-input" id="validatedCustomFile" required>  
  124.                                             <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>  
  125.                                             <div class="invalid-tooltip">Choose file for upload</div>  
  126.                                         </div>  
  127.                                     </div>  
  128.                                 </div>  
  129.                             </div>  
  130.                             <div class="row">  
  131.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  132.                                     <label for="address">Address</label>  
  133.                                     <textarea class="form-control" rows="3" id="address" aria-describedby="inputGroupPrepend" required></textarea>  
  134.                                     <div class="invalid-tooltip">please enter address</div>  
  135.                                 </div>  
  136.                             </div>  
  137.                             <div class="row">  
  138.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  139.                                    <div class="form-check">  
  140.                                             <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>  
  141.                                             <label class="form-check-label" for="invalidCheck">  
  142.                                                 Agree to terms and conditions  
  143.                                             </label>  
  144.                                             <div class="invalid-tooltip">  
  145.                                                 You must agree before submitting.  
  146.                                             </div>  
  147.                                         </div>  
  148.                                 </div>  
  149.                             </div>  
  150.                             <div class="row">  
  151.                                 <div class="col-sm-12 col-md-12 col-xs-12">  
  152.                                     <div class="float-right">  
  153.                                         <button class="btn btn-danger rounded-0" type="submit">Cancel</button>  
  154.                                         <button class="btn btn-primary rounded-0" type="submit">Register</button>  
  155.                                     </div>  
  156.                                 </div>  
  157.                             </div>  
  158.                         </form>  
  159.                     </div>  
  160.                 </div>  
  161.             </div>  
  162.         </div>  
  163.     </div>  
  164. </body>  
  165. </html>  
Output
 
Screenshot-1
 
Output 
 
Screenshot-2
 
Output 
 
Screenshot-3
 
Output


Similar Articles