JSFiddle - React, Tailwind, and code Playground

by kristenconnal

HTML

<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 __) that tests for the existence of five numerical digits.</li>
    <li>You will complete the if statements 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>
      <label for="city">City</label>
      <input size="30" placeholder="Town or City" name="city" id="city" type="text">
      <br>
      <label for="state">State</label>
      <input size="29" placeholder="State/Province" name="state" id="state" type="text">
      <br>
      <label for="zip">Postal Code</label>
      <input size="22" placeholder="Postal Code" name="zip" id="zip " type="text">
      <br>
      <span name="zip error" id="zip error" style="color:red; font-size:14px; font-weight:bold" display="block">Error: The zip code you entered is not five digits!</span>
      <br>
      <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("zip error");

zip.addEventListener("change", validate);

function validate() {
  var zip = this.value;
  var zipPatt = new RegExp("\d{3}");
  var test = zipPatt.test(zip);
  if (test == true) {
    zipAlert.style.display = "none";
  } else {
    zipAlert.style.display = "block";
  }
};