Form validation & fetch POST request using materialize.css & Javascript

validate_form.js

// trim polyfill to clear whitespace
if (!String.prototype.trim) {
  String.prototype.trim = function() {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
  };
}

var submit_btn = document.getElementById("acc_form_btn");

submit_btn.addEventListener("click", function() {
  var data = {
    first_name: document.getElementById("first_name").value.trim(),
    last_name: document.getElementById("last_name").value.trim(),
    email: document.getElementById("email").value.trim(),
    tel: document.getElementById("tel").value.trim(),
    company_name: document.getElementById("company_name").value.trim(),
    company_website: document.getElementById("company_website").value.trim(),
    company_address: document.getElementById("company_address").value.trim(),
    company_postcode: document.getElementById("company_postcode").value.trim(),
    password: document.getElementById("password").value.trim(),
    confirm_password: document.getElementById("confirm_password").value.trim()
  };

  // Regex for validation
  var hasNumber = /\d/;
  var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  var passwordRegex = /(?=.*[a-z])(?=.*[A-Z]).{8,}/g;

  function validateEmail(email) {
    var OK = emailRegex.exec(email);
    if (!OK) {
      return false;
    } else {
      return true;
    }
  }

  validateEmail();

  function validatePassword(password) {
    var OK = passwordRegex.exec(password);
    if (!OK) {
      return false;
    } else {
      return true;
    }
  }

  validatePassword();

  // Input length validation
  if (data.first_name.length == 0) {
    M.toast({ html: "Please enter a first name", displayLength: 2000 });
  } else if (data.last_name.length == 0) {
    M.toast({ html: "Please enter a last name", displayLength: 2000 });
  } else if (data.email.length == 0) {
    M.toast({ html: "Please enter an email address", displayLength: 2000 });
  } else if (data.tel.length == 0) {
    M.toast({ html: "Please enter a telephone number", displayLength: 2000 });
  } else if (data.company_name.length == 0) {
    M.toast({ html: "Please enter your company address", displayLength: 2000 });
  } else if (data.company_address.length == 0) {
    M.toast({ html: "Please enter your company address", displayLength: 2000 });
  } else if (data.company_postcode.length == 0) {
    M.toast({
      html: "Please enter your company postcode",
      displayLength: 2000
    });
  } else if (data.password.length == 0) {
    M.toast({ html: "Please enter a password", displayLength: 2000 });
  } else if (data.password.length < 8) {
    M.toast({
      html: "Your password must be at least 8 characters long",
      displayLength: 2000
    });
  } else if (hasNumber.test(data.first_name) == true) {
    // Validation
    // Validate any strings that shouldn't contain numbers
    M.toast({
      html: "First name should not contain numbers",
      displayLength: 2000
    });
  } else if (hasNumber.test(data.last_name) == true) {
    M.toast({
      html: "Last name should not contain numbers",
      displayLength: 2000
    });
  } else if (validateEmail(data.email) == false) {
    // Validate email
    M.toast({
      html: data.email + " doesn't look like a valid email",
      displayLength: 2000
    });
  } else if (validatePassword(data.password) == false) {
    // Validate password
    M.toast({
      html:
        "Your password must contain at least 1 uppercase & 1 lowercase letter",
      displayLength: 2000
    });
  } else if (data.password != data.confirm_password) {
    // Validate passwords match
    M.toast({
      html: "Password and confirm password did not match",
      displayLength: 2000
    });
  } else {
    fetch(window.location.origin + "/create-account-form", {
      method: "POST",
      credentials: "include",
      body: JSON.stringify(data),
      cache: "no-cache",
      headers: new Headers({ "content-type": "application/json" })
    })
      .then(function(response) {
        if (response.status !== 200) {
          M.toast({
            html:
              "There was an error, please try again later (" +
              response.status +
              ")",
            displayLength: 2000
          });
          return;
        }
        response.json().then(function(data) {
          if (data.response == "account_created") {
            window.location.assign(window.location.origin + "/shop/profile");
          } else {
            M.toast({ html: data.response, displayLength: 2000 });
          }
        });
      })
      .catch(function(error) {
        M.toast({
          html: "There was an error, please try again later",
          displayLength: 2000
        });
        console.log("Fetch error: " + error);
      }); // end fetch
  } // end else
}); // end click