title: Is there someone that could help me with Contact-form validation?
body: <p>I am trying to combine inputs validation functions with submit function in order to have fully functional simple contact-form that reacts to wrong/right input types and empty fields. Using boostrap 4, read documentation of validation but I don't understand why contact form is sent even if only one field is filled and it does not require email :/ :(. I'm noob at JS, not able to do that and going crazy -stacked there for 8 hours. Commented code in the script.js is there coz i tried to combine different things.</p>
  <p>Is there someone, that could rewrite me the functions ?</p>
  <p>Here is the code for form:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  //---------Contact form SEND-----------
  window.addEventListener("DOMContentLoaded", function () {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');  
    // get the form elements defined in your form HTML above
    var form = document.getElementById("bootstrapForm");
    // var button = document.getElementById("my-form-button");
    var status = document.getElementById("status");
  
    // Success and Error fn-s after form submission
    function success() {
      form.reset();
      status.classList.add("success");
      status.innerHTML = "Správa bola úspešne odoslaná.";
    }
  
    function error() {
      status.classList.add("error");
      status.innerHTML = "Pri odosielaní správy sa vyskytol problém";
    }
  
  
  
    var validation = Array.prototype.filter.call(forms, function(form) {
      // handle the form submission event
      form.addEventListener('submit', function(e) {
        if (form.checkValidity() === false) {
          e.preventDefault();
          e.stopPropagation();
          var data = new FormData(form);
          ajax(form.method, form.action, data, success, error);
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
  
  // helper function for sending an AJAX request
  
  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }
  
  
  
  
  
  
  
  
  
  $(function()
  {
  
  
  
      // Contact forms
      "use strict";
  
      // Detect when form-control inputs are not empty
      $(".cool-b4-form .form-control").on("input", function() {
        if ($(this).val()) {
          $(this).addClass("hasValue");
        } else {
          $(this).removeClass("hasValue");
        }
      });
  
  
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my website (form is at bottom) so that you can see it on the move: <a href="https://marekcmarko.sk" rel="nofollow noreferrer">https://marekcmarko.sk </a></p>