JSFiddle - React, Tailwind, and code Playground

by Matt Hodgson

HTML

<h2>Test JavaScript Form Validation</h2>
 
  <form id="theForm" method="get" action="submitData">
    <table>
    <tr>
      <td>Name<span class="red">*</span></td>
      <td><input type="text" id="name" name="name"/></td>
      <td id="nameError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Address</td>
      <td><input type="text" id="address" name="address" /></td>
      <td id="addressError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Postcode<span class="red">*</span></td>
      <td><input type="text" id="zipcode" name="zipcode" /></td>
      <td id="zipcodeError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Country<span class="red">*</span></td>
      <td><select id="country" name="country">
            <option value="" selected>Please select...</option>
            <option value="AA">AA</option>
            <option value="BB">BB</option>
            <option value="CC">CC</option>
          </select><br /></td>
      <td id="countryError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Gender<span class="red">*</span></td>
      <td><input type="radio" name="gender" value="m" />Male
          <input type="radio" name="gender" value="f" />Female</td>
      <td id="genderError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Preferences<span class="red">*</span></td>
      <td><input type="checkbox" name="color" value="r" />Red
          <input type="checkbox" name="color" value="g" />Green
          <input type="checkbox" name="color" value="b" />Blue</td>
      <td id="colorError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Phone<span class="red">*</span></td>
      <td><input type="text" id="phone" name="phone" /></td>
      <td id="phoneError" class="red">&nbsp;</td></tr>
    <tr>
      <td>Email<span class="red">*</span></td>
      <td><input type="text" id="email" name="email" /></td>
      <td id="emailError" class="red">&nbsp;</td></tr>
    <tr>
      <td>password (6-8 characters)<span class="red">*</span></td>
      <td><input...

CSS

.red {  /* for error messages */
   color: red;
}
 
input.error {  /* for the error input text fields */
   border: 1px red inset;
   padding: 2px;
}
 
table {
   border: 0;
}
 
td {
   margin: 0;
   padding: 3px 10px 3px 3px;
}

JavaScript

window.onload = init;
 
// The "onload" handler. Run after the page is fully loaded.
function init() {
   // Attach "onsubmit" handler
   document.getElementById("theForm").onsubmit = validateForm;
   // Attach "onclick" handler to "reset" button
   document.getElementById("reset").onclick = clearDisplay;
   // Set initial focus
   document.getElementById("name").focus();
}
 
/* The "onsubmit" handler to validate the input fields.
 * Most of the input validation functions take 2 arguments:
 * inputId or inputName: the "id" of the <input> element to be validated
 *   or "name" for checkboxes and radio buttons.
 * errorMsg: the error message to be displayed if validation fails.
 *   The message shall be displayed on an element with id of
 *   inputID+"Error" if it exists; otherwise via an alert().
 */
function validateForm() {
   return (isNotEmpty("name", "Please enter your name!")
        && isNumeric("zipcode", "Please enter a valid postcode!")
        && isLengthMinMax("zipcode", "Please enter your postcode!", 7, 8)
        && isSelected("country", "Please make a selection!")
        && isChecked("gender", "Please check a gender!")
        && isChecked("color", "Please check a color!")
        && isNumeric("phone", "Please enter a valid phone number!")
        && isValidEmail("email", "Enter a valid email!")
        && isLengthMinMax("password", "Enter a valid password!", 6, 8)
        && verifyPassword("password", "pwVerified", "Different from the password!"));
}
 
// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
   var inputElement = document.getElementById(inputId);
   var errorElement = document.getElementById(inputId + "Error");
   var inputValue = inputElement.value.trim();
   var isValid = (inputValue.length !== 0);  // boolean
   showMessage(isValid, inputElement, errorMsg, errorElement);
   return isValid;
}
 
/* If "isValid" is false, print the errorMsg; else, reset to normal display.
 * The errorMsg shall be...