humphd/forms.html

## forms.html
<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Load Bootstrap's CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">    <!-- Our stylesheet -->
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <!-- Our custom styles-->
    <style>
      label[required]::after {
        content: " *";
        color: red;
      }
    </style>
  </head>
  <body class="m-4">
    <div class="container">
      <h1>Update User Info</h1>
      <p>
        Please update your user information.
      </p>

      <!-- Submit the form to /submit-form using a POST request -->
      <form id="user-info-form" action="/user-info" method="post">

        <div class="row">
          <label for="username" class="form-label">Username</label>
          <input type="text" class="form-control" id="username" name="username" value="jsmith" readonly />
        </div>

        <div class="row">
          <label for="name" class="form-label" required>Name</label>
          <input class="form-control" type="text" id="name" name="name" required value="Dave" />
        </div>

        <div class="row">
          <label for="email" class="form-label" required>Email</label>
          <input class="form-control" type="email" id="email" name="email" required value="email@email.com" />
        </div>

        <div class="row">
          <label for="phone" class="form-label" required>Phone</label>
          <input class="form-control" type="tel" id="phone" name="phone" required value="555-555-5555" />
        </div>

        <div class="row">
          <label for="password" class="form-label" required>Password</label>
          <input class="form-control" type="password" id="password" name="password" required value="abc" />
        </div>

        <div class="row">
          <label for="new-password" class="form-label" required>New Password</label>
          <input class="form-control" type="password" id="new-password" name="new-password" required />
        </div>

        <div class="row">
          <label for="confirm-password" class="form-label" required>Confirm Password</label>
          <input class="form-control" type="password" id="confirm-password" name="confirm-password" required />
        </div>

        <div class="mt-2 text-end">
          <input class="btn btn-outline-secondary mr-3" type="reset" name="reset" value="Reset">
          <input class="btn btn-primary" type="submit" name="submit" value="Submit">
        </div>
      </form>

      <div id="error-message" class="alert alert-danger mt-4 invisible" role="alert">
        A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
      </div>
    </div>


    <!-- Include the Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Include our form validation script -->
    <script>
      function comparePasswords(first, second) {
        return first === second;
      }

      function showErrorMessage(message) {
        const errorMessage = document.querySelector('#error-message');
        errorMessage.innerText = message;
        errorMessage.classList.remove("invisible")
      }

      function hideErrorMessage() {
        document.querySelector('#error-message').classList.add("invisible")
      }

      const form = document.querySelector('#user-info-form');
      const newPasswordElem = form['new-password'];
      newPasswordElem.addEventListener("input", function(e) {
        const password = newPasswordElem.value;
        if(!(password.length >=8)) {
          console.log('WRONG LENGTH!!!!!')
        }

        if(!/\d/.test(password)) {
          showErrorMessage('Must contain a number')
        } else {
          hideErrorMessage();
        }

      });

      form.addEventListener('submit', function(event) {
        const confirmPasswordElem = form['confirm-password'];

        if(!comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
          function checkPasswordMatch(e) {
            if(comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
              hideErrorMessage();
            } else {
              showErrorMessage("Your new password is not matching, please fix");
            }
          }

          newPasswordElem.addEventListener("input", checkPasswordMatch);
          confirmPasswordElem.addEventListener("input", checkPasswordMatch);

          showErrorMessage("Your new password is not matching, please fix");
          event.preventDefault();
          return false;
        }

        return true;
      });


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Form Validation</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Load Bootstrap's CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <!-- Our stylesheet -->
	<!-- Bootstrap Icons -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
	<!-- Our custom styles-->
	<style>
	label[required]::after {
	content: " *";
	color: red;
	}
	</style>
	</head>
	<body class="m-4">
	<div class="container">
	<h1>Update User Info</h1>
	<p>
	Please update your user information.
	</p>

	<!-- Submit the form to /submit-form using a POST request -->
	<form id="user-info-form" action="/user-info" method="post">

	<div class="row">
	<label for="username" class="form-label">Username</label>
	<input type="text" class="form-control" id="username" name="username" value="jsmith" readonly />
	</div>

	<div class="row">
	<label for="name" class="form-label" required>Name</label>
	<input class="form-control" type="text" id="name" name="name" required value="Dave" />
	</div>

	<div class="row">
	<label for="email" class="form-label" required>Email</label>
	<input class="form-control" type="email" id="email" name="email" required value="email@email.com" />
	</div>

	<div class="row">
	<label for="phone" class="form-label" required>Phone</label>
	<input class="form-control" type="tel" id="phone" name="phone" required value="555-555-5555" />
	</div>

	<div class="row">
	<label for="password" class="form-label" required>Password</label>
	<input class="form-control" type="password" id="password" name="password" required value="abc" />
	</div>

	<div class="row">
	<label for="new-password" class="form-label" required>New Password</label>
	<input class="form-control" type="password" id="new-password" name="new-password" required />
	</div>

	<div class="row">
	<label for="confirm-password" class="form-label" required>Confirm Password</label>
	<input class="form-control" type="password" id="confirm-password" name="confirm-password" required />
	</div>

	<div class="mt-2 text-end">
	<input class="btn btn-outline-secondary mr-3" type="reset" name="reset" value="Reset">
	<input class="btn btn-primary" type="submit" name="submit" value="Submit">
	</div>
	</form>

	<div id="error-message" class="alert alert-danger mt-4 invisible" role="alert">
	A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
	</div>
	</div>



	<!-- Include the Bootstrap JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

	<!-- Include our form validation script -->
	<script>
	function comparePasswords(first, second) {
	return first === second;
	}

	function showErrorMessage(message) {
	const errorMessage = document.querySelector('#error-message');
	errorMessage.innerText = message;
	errorMessage.classList.remove("invisible")
	}

	function hideErrorMessage() {
	document.querySelector('#error-message').classList.add("invisible")
	}

	const form = document.querySelector('#user-info-form');
	const newPasswordElem = form['new-password'];
	newPasswordElem.addEventListener("input", function(e) {
	const password = newPasswordElem.value;
	if(!(password.length >=8)) {
	console.log('WRONG LENGTH!!!!!')
	}

	if(!/\d/.test(password)) {
	showErrorMessage('Must contain a number')
	} else {
	hideErrorMessage();
	}

	});

	form.addEventListener('submit', function(event) {
	const confirmPasswordElem = form['confirm-password'];

	if(!comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
	function checkPasswordMatch(e) {
	if(comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
	hideErrorMessage();
	} else {
	showErrorMessage("Your new password is not matching, please fix");
	}
	}

	newPasswordElem.addEventListener("input", checkPasswordMatch);
	confirmPasswordElem.addEventListener("input", checkPasswordMatch);

	showErrorMessage("Your new password is not matching, please fix");
	event.preventDefault();
	return false;
	}

	return true;
	});



	</script>
	</body>
	</html>