JS error: Cannot read properties of undefined at HTMLFormElement.validate

Hi,

I’m making a personal project and have some form validation errors.

I might have a few errors as I have not tested whether the regrex works or not. This error is stopping all the errors on my form to pop up once a user types/not types something in.

Here is the HTML.

 <form novalidate>
                <div class="form-item">
                  <label for="fname">First name *</label>
                  <input type="text" id="fname" name="fname" />
                  <span class="error"></span>
                </div>
                <div class="form-item">
                  <label for="lname">Last name *</label>
                  <input type="text" id="lname" name="lname" />
                  <span class="error"></span>
                </div>
                <div class="form-item">
                  <label for="phone">Phone *</label>
                  <input type="tel" id="phone" name="phone" />
                  <span class="error"></span>
                </div>
                <div class="form-item">
                  <label for="email">Email *</label>
                  <input type="email" id="email" name="email" />
                  <span class="error"></span>
                </div>
                <div class="form-item">
                  <label for="reason">Reason for contact *</label>
                  <select name="dropdown" id="reason">
                    <option value="" selected>Please select</option>
                    <option value="General">General</option>
                    <option value="Make or change a reservation">
                      Make or change a reservation
                    </option>
                    <option value="Travel Agent Inquiry">
                      Travel Agent Inquiry
                    </option>
                    <option value="Technical Support">Technical Support</option>
                    <option value="Comments & Concerns">
                      Comments & Concerns
                    </option>
                    <option value="Other">Other</option>
                  </select>
                  <span class="error"></span>
                </div>
                <div class="form-item">
                  <label for="msg">How can we help you? *</label>
                  <textarea id="msg" name="msg" rows="4" cols="50"></textarea>
                  <span class="error"></span>
                </div>

                <button class="button secondary" type="submit" id="send">
                  Book now
                </button>
              </form>

Css

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px 20px;
  margin-top: 8px;
  display: inline-block;
  border: 1px solid #dddddd;
  background-color: #dddddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.error {
  margin-left: 1em;
  color: #d41c36;
  width: 100%;
  height: 20px;
  display: flex;
}

#dropdown {
  padding: 12px 20px;
  margin: 8px 0;
}

JS

"use strict";

//get form
const form = document.querySelector("form");

//attach event to the form
form.addEventListener("submit", validate);

function validate(event) {
  const fname = document.getElementById("fname");
  const lastName = document.getElementById("lname");
  const phone = document.getElementById("phone");
  const email = document.getElementById("email");
  const reason = document.getElementById("reason");
  const message = document.getElementById("msg");
  let error;

  //clear all errors
  const errorList = document.querySelectorAll(".error");

  for (let item of errorList) {
    item.innerHTML = "";
  }

  //   if (fname.value.length === 0) {
  //     error.fname.parentNode.querySelector(".error");
  //     error.innerHTML = "Please enter a first name";
  //     event.preventDefault();
  //   }

  //   if (lastName.value.length === 0) {
  //     error.lastName.parentNode.querySelector(".error");
  //     error.innerHTML = "Please enter a last name";
  //     event.preventDefault();
  //   }

  let pattern = /^[a-zA-Z]{2,}$/;
  if (pattern.test(fname.value) === false) {
    error.fname.parentNode.querySelector(".error");
    error.innerHTML = "Please enter a first name with at least 2 letters.";
    event.preventDefault();
  }

  if (pattern.test(lastName.value) === false) {
    error.lastName.parentNode.querySelector(".error");
    error.innerHTML = "Please enter a last name with at least 2 letters.";
    event.preventDefault();
  }
  //Checking the phone for only digits and between 8-10 digits
  //and the user has put in either a contact number or email
  let patternPhone = /^[0-9]{8,10}$/;
  let patternEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (phone.value.length === 0 && email.value.length === 0) {
    error.phone.parentNode.querySelector(".error");
    error.email.parentNode.querySelector(".error");
    error.innerHTML = "Please enter a contact number or email.";
    if (patternPhone.test(phone.value) === false) {
      error.phone.parentNode.querySelector(".error");
      error.innerHTML = "Please enter a contact number between 8-10 digits.";
    }
    if (patternEmail.text(email.value) === false) {
      error.email.parentNode.querySelector(".error");
      error.innerHTML = "Please enter a valid email address.";
    }
    event.preventDefault();
  }

  if (reason.value.length === 0) {
    error.reason.parentNode.querySelector(".error");
    error.innerHTML = "Please select a reason from the dropdown menu";
    event.preventDefault();
  }

  if (message.value.length === 0) {
    error.message.parentNode.querySelector(".error");
    error.innerHTML = "Please enter a message";
    event.preventDefault();
  }
}

Here the variable “error” is declared but no value is assigned. It is therefore undefined and doesn’t have a property fname:

1 Like