bootstrap validation

by Fairlight

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="inputform" class="container">
        <!-- --------- FORM ------------------------------------------ -->
        <form class="needs-validation" novalidate onsubmit="checkFunc(this);return false;">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="firstName">First name</label>
                    <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
                    <div class="invalid-feedback">
                        Valid first name is required.
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="email">email </label>
                    <input type="email" class=" form-control" id="email" placeholder="" value="" required>
                    <div class="invalid-feedback">
                        Valid first email is required.
                    </div>
                </div>
            </div>
            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" id="check" type="submit">OK</button>
        </form>
    </div>
    
      <div id="reconfirm" style="display:none;">
        <!-- <div class="col-md-4 order-md-1"> -->
        <h1 class="mb-3">OK</h1>

    </div>

JavaScript

(function () {
  'use strict'

  window.addEventListener('load', function () {
    var forms = document.getElementsByClassName('needs-validation');
    Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }else
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

function checkFunc(obj) {
  $('#check').click(function () {
      console.log("obj",obj);
      document.getElementById("inputform").style.display = "none";
      document.getElementById("reconfirm").style.display = "block";
      document.getElementById("reconfirm").innerHTML = $('#firstName').val()+" "+$('#email').val();
            });
        }