Skip to main content

Bootstrap 4 form validation - Advanced

Bootstrap 4 supports extraordinary ways to validate your form using the charismatic Tooltips. It also supports both .valid and .invalid feedback as well. For custom validation, you'll need to include  novalidate attribute in your form like below,
<form class="needs-validation" novalidate>
</form>
The .valid-tooltip class is used to display the valid feedback message. For invalid feedback message, you'll simply have to include .invalid-tooltip class. Lets see an example,
<div class="container">
  <h3>
    <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">BOOTSTRAP 4 FORM VALIDATION - ADVANCED</a></h3>
  <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">Learn More</a>
<form class="needs-validation"  novalidate>
<div class="form-row">
  <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Name</div>
    </div>
    <input type="text" class="form-control" id="Name" placeholder="Enter Name" required>
  <div class="valid-tooltip">
        great!
      </div>
    <div class="invalid-tooltip">
          Please enter name
        </div>
  </div>
<div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Email</div>
    </div>
    <input type="email" class="form-control" id="Email" placeholder="Enter Email" required>
  <div class="valid-tooltip">
        great!
      </div>
  <div class="invalid-tooltip">
          Please enter email
        </div>
  </div>
  </div>
  <div class="form-row">
     <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Mobile</div>
    </div>
    <input type="number" class="form-control" id="Mobile" placeholder="Enter Mobile" required>
  <div class="valid-tooltip">
        great!
      </div>
       <div class="invalid-tooltip">
          Please enter mobile
        </div>
  </div>
<div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Gender</div>
    </div>
    <select class="custom-select" required>
      <option value="">- Select Gender -</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
  </select>
  <div class="valid-tooltip">
        great!
      </div>
  <div class="invalid-tooltip">
          Please select gender
        </div>
  </div>
  </div>
  <div class="form-row">
         <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">DOB</div>
    </div>
<input type="date" name="bday" max="3000-12-31" min="1000-01-01" class="form-control" required>
  <div class="valid-tooltip">
        great!
           </div>
           <div class="invalid-tooltip">
          Please select dob
        </div>
  </div>
         <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">City</div>
    </div>
    <input type="text" class="form-control" id="City" placeholder="Enter City" required>
  <div class="valid-tooltip">
        great!
      </div>
           <div class="invalid-tooltip">
          Please enter city
        </div>
  </div>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

Include JS:
(function() {
  'use strict';
  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);
})();
Demo
See the Pen BOOTSTRAP 4 FORM VALIDATION - ADVANCED by Prime Study Hub (@PrimeStudyHub) on CodePen.
If you would like to learn more about the latest bootstrap information click here.

NEXT STEPS...

Increase your form identity by following the steps outlined above. Ask questions & get feedback on your work by using the below comment section effectively.







Labels:

Comments

Post a Comment

Popular posts from this blog

FORCE ORDER in SQL Server

The FORCE ORDER is a query hint it executes the order of the tables exactly specified in a statement. When we use this query hint in a statement it will tell SQL server not to change the order of the joins in the query. Basically, the SQL server rearrange your joins to be in the order that it thinks it will be optimal for your query to execute. Now, Lets see the execution plan without the FORCE ORDER: The above execution plan demonstrates the optimal order of the joins returned by the SQL server. As you can see the order starts from the sales details and goes by bank details to employee details. Suppose if you don't want the SQL server to change the order of the joins in a query you can use FORCE ORDER to stop the default ordering. The syntax for FORCE ORDER query hint is, OPTION ( FORCE ORDER ); Now, Lets see the execution plan with the FORCE ORDER: select * from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on e.Id=b.EmpID inner join tbl_S...
Post a Comment
Read more

How to create comma separated values in SQL server?

Comma Separated Values in SQL Predominantly in reporting, you may gone through a situation where you need to convert a comma separated values into list of rows or to convert a list of rows into single column to display in a report. In this splash reading, you will understand the following: How to convert comma separated data in a column to multiple rows How to convert multiple rows into one comma separated values Using COALESCE function Using STUFF function Convert comma separated data in a column to multiple rows Here we have an Customer table with a list of products bought by each customer, ID CUSTOMER PRODUCTS 1 Stuart Chain Saw,Circular Saw 2 Michael Drill,Hammer 3 Jonathan Sticky Notes,Mouse 4 Nabeel Mobile,Headset Suppose you want to return this as a single table, list of products bought by each customer. we need to create a function that splits our comma separated col...
2 comments
Read more

OPTION (MERGE JOIN) in SQL Server

OPTION (MERGE JOIN) in SQL Server The MERGE JOIN query hint is a best available join algorithm in SQL server. It is based on first sorting  both data sets according to the join conditions and then traversing through the sorted data sets and finding matches. The MERGE JOIN itself is very fast, but it can be an expensive choice if sort operations are required. This produces the best optimal execution plan. The syntax is, OPTION ( MERGE JOIN ); Now, Lets see how to use MERGE JOIN with SELECT statement.? select * from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on b.EmpId=e.Id OPTION(MERGE JOIN); The statement returned optimal execution plan is, The MERGE JOIN operator gets a row from each input and compares them. In above statement, it merges all joins and first sorting data sets and then traversing through the sorted data sets and finding matches, if they are equal the rows are returned. If they are not equal, the lower-value row is rem...
Post a Comment
Read more

How to manipulate JSON data in SQL server?

Manipulate JSON data in SQL Server JavaScript Object Notation (JSON) is a lightweight popular data exchangeable format used across modern IoT platforms, web and mobile applications etc. It is a language independent textual data format. JavaScript Object Notation (JSON) is also used for storing unstructured data in log files or NoSQL Databases such as Microsoft Azure Cosmos DB. Many RESTful web services that allow us to store and retrieve JSON formatted texts among different protocols using different Endpoints. The example of JSON text is as follows, [{         "customer":"Michael",         "products":["Watch","Mobile","Books"] }, {         "customer":"Stuart",         "products":["Laptop","Keyboard","Mouse"] } ] In this article you will understand the following, Read JSON data from table Modify JSON data in a table Validate JSON objects  ...
Post a Comment
Read more

OPTION Loop Join in SQL Server

The OPTION ( LOOP JOIN ) would enforce LOOP JOIN across all joins in the query. Using the OPTION ( LOOP JOIN ) appears to allows the query optimizer to join the tables using the nested loops in which ever order SQL server decides it is optimal. The OPTION clause must be a last clause in a statement. The syntax is, OPTION ( LOOP JOIN ); Now, Lets see how to use LOOP JOIN with SELECT statement.? select *from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on b.EmpID=e.Id inner join tbl_SalesDetails as s on s.BankId=b.Id OPTION(LOOP JOIN); The statement returned execution plan is, The above statement loops through all the joins that starts from sales details and goes by bank details to employee details in which the order that SQL server thinks it is optimal. This does not follow the order of joins that we specify. Suppose, if you want the SQL server to follow the order of joins that you specify you have to use FORCE ORDER in OPTION clause. Howe...
1 comment
Read more