JSFiddle - React, Tailwind, and code Playground

by kristenconnal

HTML

<h4>
Kristen Connal, Graduate Assignment
</h4><h3>Practice Set, Week 10, Form Validation</h3>

<p>In this assignment, you will be validating the postal code. This validation should check that a value was entered and that it is five digits. If not, the error message provided in the HTML should be shown.
  <p>Remember to hide the error message if the value is five digits!</p>
  <p>To accomplish this, you will complete the following tasks:</p>
  <ul>
    <li>You will write a regular expression in the space provided (line 21) that tests for the existence of five numerical digits.</li>
    <li>You will complete the if statement (lines 29 and 33) to show the error message if the postal code is not five numerical digits, and hide the error message if it is.</li>
  </ul>


  <form id="myform">
    <fieldset><strong>Contact Information</strong>
      <br>
      <br>Name
      <br>
      <input size="30" placeholder="Full Name" name="name" id="name" type="text">
      <br>
      <br>Address
      <br>
      <input size="30" placeholder="Street Address" name="address" id="address">
      <br>
      <br>City
      <br>
      <input size="30" placeholder="Town or City" name="city" id="city" type="text">
      <br>
      <br>State
      <br>
      <input size="30" placeholder="State/Province" name="state" id="state" type="text">
      <br>
      <br>Zip Code
      <br>
      <input size="30" placeholder="Postal Code" name="zip" id="zip" type="text">
      <br>
      <div name="zip error" id="zipErr" style="color:red; font-size:14px; font-weight:bold; display:none">Error: The zip code you entered is not five digits!</div>
      <br>Phone
      <br>
      <input size="16" placeholder="Phone Number" id="phone" name="phone" type="text">
      <br>
      <br>
      <button type="submit" id="submitBtn" name="submit">Submit</button>
      <br>
    </fieldset>
  </form>
  <p></p>

JavaScript

var zip = document.getElementById("zip");
var zipAlert = document.getElementById("zipErr");

zip.addEventListener("keyup", validate);

function validate() {
  var zip = this.value;

  /* Define the variable with the proper RegExp to match five digits. Put the RegExp 
  within the quotes of the new RegExp*/
  var zipPatt = new RegExp(""); // new RegExp("^\\d{5}$");

  var test = zipPatt.test(zip);

  if (test == true) {
    /* Add code to change the display of the error message so it does not show
    or take up space on the page */
    //zipAlert.style.display = "none";
  } else {
    /* Add code to change the display of the error message so it does show
    on the page */
    //zipAlert.style.display = "block";
  }
};