JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<form onsubmit="return validate(this)">
  <label>Address: <input type="text" name="address"></label>
  <br>
  <label>ZIP code: <input type="text" name="zip" onchange="validateZip(this.value)"></label>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
  function validateZip(value) {
    if (/^\d{5}$/.test(value))
      return true;
    alert("Please enter a valid ZIP code");
    return false;
  }

  function validateAddress(value) {
    if (value != "")
      return true;
    alert("Please enter a valid address");
    return false;
  }

  function validate(form) {
    if (!validateAddress(form.address.value))
      return false;
    if (!validateZip(form.zip.value))
      return false;
      
    alert("Validation successful!");
    return true;
  }

</script>