Order Form

jQuery Form Validation

by Stephen Herd

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>JavaScript Order Form Example</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="order-form.css">

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="order-form.js"></script>
  </head>

  <body>
    <main>
      <h1>Order Form</h1>
      <form action="thanks.html" method="post" id="entry">
        <fieldset>
          <legend> Order Information </legend>

          <label for="username">User Name: </label>
          <input type="text" name="username" id="username" required>
          <span id="nameErr" class="err"></span>

          <label for="formemail">Email Address: </label>
          <input type="email" name="formemail" id="formemail" required>
          <span id="emailErr" class="err"></span>

          <label for="confirm">Confirm Email Address: </label>
          <input type="email" name="confirm" id="confirm" required>
          <span id="confErr" class="err"></span>

          <label for="formtel">Telephone Number: </label>
          <input type="text" name="formtel" id="formtel" required placeholder="999-999-9999">
          <span id="telErr" class="err"></span>

          <label for="formage">Age: </label>
          <input type="number" name="formage" id="formage" min="18" max="100">
          <span id="ageErr" class="err"></span>

          <label for="formdate">Today's Date: </label>
          <input type="text" name="formdate" id="formdate">
          <span id="dateErr" class="err"></span>

          <label for="formurl">URL of your website: </label>
          <input type="url" name="formurl" id="formurl">
          <span id="urlErr" class="err"></span>

          <label for="formstory">Special...

CSS

body {
  font-family: arial, helvetica, sans-serif;
  background: darkgreen url('../images/springbg.jpg');
  background-size: cover;
}

h1 {
  color: darkgreen;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

main {
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
  border: thick solid darkgreen;
  border-radius: 15px;
  background-color: cornsilk;
}

label {
  padding: 8px 0 3px;
}

ul {
  list-style: none;
}

.err {
  color: red;
}

JavaScript

$(document).ready(function() {
  // executes after html is loaded

  //add datepicker to form-date field
  $('#formdate').datepicker();

  // place cursor in name field
  $('#username').focus();

  /* Long sleeves and hoodie features are only available in black.
     When black radio button is clicked, enable long sleeves and hoodie features */
  $('#black').click(function() {
    $('#longsleeves, #hoodie').removeAttr('disabled');
  });
  // When red, blue or silver radio button is clicked, disable long sleeves and hoodie features */
  $('#red, #blue, #silver').change(function() {
    $('#longsleeves, #hoodie').attr('disabled', true);
  });
  // If the user selects hoodie, check the longsleeves checkbox also
  $('#hoodie').change(function() {
    if ($(this).prop('checked')) {
      $('#longsleeves').prop('checked', true);
    }
  });
  // If the user unchecks longsleeves, uncheck the hoodie checkbox also
  $('#longsleeves').change(function() {
    if (!$(this).prop('checked')) {
      $('#hoodie').prop('checked', false);
    }
  });
  //validate functions
  // validate username
  $('#username').blur(function() {
    if ($(this).val() == "") {
      $('#nameErr').text('Username is required');
    } else if ($(this).val().length < 5) {
      $('#nameErr').text('Username must be at least 5 characters');
    } else {
      // set error to blank in case a prior error message was displayed.
      $('#nameErr').text('');
    }
  }); // end validate username

  // create regex for email
  emailregex = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;

  // validate email using regular expression
  $('#formemail').blur(function() {
    if (!$('#formemail').val().match(emailregex)) {
      $('#emailErr').text('Email format user@domain.com');
    } else {
      $('#emailErr').text('');
    }
  }); // end email validation

  // validate that the emails match if the email or confirmation email is changed 
  $('#confirm').blur(function() {
    if ($('#formemail').val() !=...