index.js

// your code goes here ...
(function () {
  // Get the elements we need to act on or attach listeners to.
  var household_list = document.querySelector('.household');
  var form = document.querySelector('form');
  var buttons = form.querySelectorAll('button');
  var add_button = buttons[0];
  var submit_button = buttons[1];

  // Add click handlers.
  add_button.addEventListener('click', validateInput);
  add_button.addEventListener('click', addHouseholdMember);
  submit_button.addEventListener('click', handleFormSubmit);

  var itemIsValid = true;

  function validateInput(event) {
    // Prevent the default action of form submission.
    event.preventDefault();

    console.log('here');

    // Get the form data.
    var formData = new FormData(form);

    var age = formData.get('age');
    var age_input = form.querySelector('input[name="age"]');

    var relationship = formData.get('rel');
    var relationship_input = form.querySelector('select[name="rel"]');

    if (!age || age <= 0) {
      if (!age_input.isMarkedInvalid) {
        age_input.style = 'border: 1px solid red;';
        age_input.errorElement = document.createElement('p');
        age_input.errorElement.innerText = (!age) ? 'Age field is required' : 'Age must be greater than 0';
        age_input.parentNode.parentNode.appendChild(age_input.errorElement);
      }

      // Store the state of the element so we don't duplicate error messages.
      // @TODO: replace with data attribute
      age_input.isMarkedInvalid = true;

      itemIsValid = false;
    }
    else {
      if (age_input.isMarkedInvalid) {
        age_input.style = '';
        age_input.parentNode.parentNode.removeChild(age_input.errorElement);
      }

      // Update whether the element is currently invalid.
      age_input.isMarkedInvalid = false;
      itemIsValid = true;
    }

    if (!relationship) {
      if (!relationship_input.isMarkedInvalid) {
        relationship_input.style = 'border: 1px solid red;';
        relationship_input.errorElement = document.createElement('p');
        relationship_input.errorElement.innerText = 'Relationship field is required';
        relationship_input.parentNode.parentNode.appendChild(relationship_input.errorElement);
      }

      // Store the state of the element so we don't duplicate error messages.
      relationship_input.isMarkedInvalid = true;

      itemIsValid = false;
    }
    else {
      if (relationship_input.isMarkedInvalid) {
        relationship_input.style = '';
        relationship_input.parentNode.parentNode.removeChild(relationship_input.errorElement);
      }

      // Update whether the element is currently invalid.
      relationship_input.isMarkedInvalid = false;
      itemIsValid = true;
    }
  }

  function addHouseholdMember(event) {
    // console.log(event);
    // console.log(itemIsValid);

    if (itemIsValid) {
      var formData = new FormData(form);

      var household_member_item = document.createElement('li');
      household_member_item.innerText = 'Age: ' + formData.get('age');
      household_list.appendChild(household_member_item);
    }
  }

  function handleFormSubmit(event) {
    // Prevent the default action of form submission.
    event.preventDefault();

    // Get the form data.
    // var formData = new FormData(form);
  }
}(document));