Bootstrap 4 Form Validation

Question

I'm a beginner with bootstrap and I have seen a lot of bootstrap 3 form validation plugins etc, but I haven't found any for bootstrap 4.

I'm trying to validate multiple forms, and here is my code:

<!-- Contact -->
<div class="container white">
  <div class="row">
    <div class="container white percent100">
      <div class="col-lg-12">
        <div class="padder-t2">
          <h1>Contact</h1>
          <div class="horiz-divider"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row padder-t padder-b">
    <div class="container white">
      <div class="col-lg-12">
        <!-- Form -->
        <form class="form-horizontal" action=" " method="post" id="contact_form">
          <fieldset>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>First Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Last Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>E-Mail</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                    <input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Phone #</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                    <input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text area -->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Message</h4></label>
                </div>
                <div class="col-md-4 col-lg-5 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                    <textarea id="comment" class="form-control" name="comment" placeholder="Your Message"></textarea>
                  </div>
                </div>
              </div>
            </div>
            <!-- Success message -->
            <div class="alert alert-success" role="alert" id="success_message">Success <i class="fa fa-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
            <!-- Button -->
            <div class="form-group">
              <div class="row">
                <label class="col-md-4 col-lg-4 control-label"></label>
                <div class="col-md-4 col-lg-4">
                  <button type="submit" class="btn btn-danger raised">Send <i class="fa fa-paper-plane"></i></button>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="row padder-b">
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-9 col-lg-9">Contact us directly:</h4>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Mail:</h4>
      <a class="col-md-6 col-lg-6 padder-lr" href="mailto:lorem@ipsum.com">
        <h4 id="mail">lorem@ipsum.com</h4>
      </a>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Adress:</h4>
      <h4 class="col-md-6 col-lg-6 padder-lr" id="adress">2 LoremIpsum Road, 67000 City - Country</h4>
    </div>
  </div>
</div>

I have tried to modify existing js, but I had no luck.

Here is the rendered form:

jsfiddle of the form

Answer 1

Update 2020 - Bootstrap 4.4.x

Here's another option (modern JS) if you want to validate each input one at a time (live or real-time) instead of waiting for the entire form to be submitted...

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // fetch all the forms we want to apply custom style
    var inputs = document.getElementsByClassName('form-control')

    // loop over each input and watch blur event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // reset
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
    <div class="form-group">
        <label class="form-control-label" for="input1">Enter some input</label>
        <input type="text" class="form-control" name="input1" id="input1" 
            autocomplete="no" required>
        <div class="valid-feedback">Success! You've done it.</div>
        <div class="invalid-feedback">No, you missed this one.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="input2">Enter password</label>
        <input type="text" class="form-control" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$" 
            autocomplete="no" name="input2" id="input2">
        <div class="valid-feedback">Nice! You got this one!</div>
        <div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
    </div>
    <div>
        <button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
    </div>
</form>

https://codeply.com/p/mzBNbAlOvQ

Answer 2

I found a simpler and a bit more modern way to implement Bootstrap 4 JS Form validation:

Note: Keep in mind that each <form> element must have the novalidate attribute and at the same time, each <input> element in it must have the required attribute.

// Upon load..
window.addEventListener('load', () => {

  // Grab all the forms
  var forms = document.getElementsByClassName('needs-validation');
  
  // Iterate over each one
  for (let form of forms) {
  
    // Add a 'submit' event listener on each one
    form.addEventListener('submit', (evt) => {
    
      // check if the form input elements have the 'required' attribute  
      if (!form.checkValidity()) {
        evt.preventDefault();
        evt.stopPropagation();
        console.log('Bootstrap will handle incomplete form fields');
      } else {
        // Since form is now valid, prevent default behavior..
        evt.preventDefault();
        console.info('All form fields are now valid...');
      }
      
      form.classList.add('was-validated');
      
    });
    
  }
  
});

<!-- Load necessary libraries -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Add form -->
<div class="container" style="padding-top: 40px;">
  <form class="student-search needs-validation" novalidate>
    <div class="form-row">
      <div class="form-group col-6">
        <label for="input-name-search" class="sr-only">Name</label>
        <input type="text" class="form-control" id="input-name-search" placeholder="Name" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Enter a name please.</div>
      </div>
      <div class="col-6">
        <button id="btn-search" type="submit" class="btn btn-success btn-block">Search student</button>
      </div>
    </div>
  </form>
</div>

Answer 3

There's no real need for a library here, you can use the native reportValidation() method: MDN. You can call it on individual inputs or on the entire form itself.

Answer 4

I just figured out the reason my code wasn't validating: I didn't have a submit button to trigger the validation. Make sure to have it.

<button type="submit" class="btn btn-primary">Save</button>

Answer 5

First I solved my issue with an external library like Jonathan Dion suggested. But recently I came across this :

Bootstrap v4.0 introduced their own form validation that you can still pair with backend php validation. From the Doc :

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        Doesn't look good!
      </div>
    </div>
  </div>
</div>

Then using JS :

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(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);
})();
</script>

This provides input border colorating and displays the valid / invalid feedback blocks according to the given pattern or properties. It is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.

Answer 6

You can use any library available on the web. You may try jqueryvalidation. It's pretty easy to use, just read the documentation.

Add the required attribute on your input and jqueryvalidation will do the job. For styling, you can add your own CSS and make it look like bootstrap.

Hopes it help

$(document).ready(function(){
 $('#contact_form').validate()
})

Demo