mphuget/gist:4cd51f4a3f4b166d8757c2ced903df19

## gistfile1.txt
<head>
  <title> Sign up </title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <link rel="stylesheet" href="/css/signup.css">
  <script type="text/javascript">


    function validate_form() {
      let username = document.getElementById('username').value;
      let firstName = document.getElementById('firstName').value;
      let lastName = document.getElementById('lastName').value;
      let email = document.getElementById('email').value;
      let input_password = document.getElementById('input_password').value;
      let input_password2 = document.getElementById('input_password2').value;

      if (username == "" | username == null)
        document.getElementById('username').style.display = 'block';
      if (firstName == "" | firstName == null)
        document.getElementById('alert_firstname').style.display = 'block';
      if (lastName == "" | lastName == null)
        document.getElementById('alert_laname').style.display = 'block';
      if (email == "" | email == null)
        document.getElementById('alert_email').style.display = 'block';
      if (input_password == "" | input_password == null)
        document.getElementById('alert_password').style.display = 'block';
      if (input_password2 == "" | input_password2 == null)
        document.getElementById('alert_password2').style.display = 'block';
      if (input_password != "" && input_password2 != "" && input_password != input_password2)
        document.getElementById('alert_samepassword').style.display = 'block';

      return (username != "") &&
             (firstName != "") &&
             (lastName != "") &&
             (email != "") &&
             (input_password != "") &&
             (input_password2 != "");
    }
  </script>
</head>

<body>
  <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title"><strong>Sign up </strong></h3></div>
        <div class="panel-body">
          <form role="form" method="POST" action="/signup" onsubmit="return validate_form();">
            <div class="form-group">
              <label for="username">Username</label>
              <label id="alert_username">You should enter a username</label>
              <h3 id="taken"> </h3>
              <input type="text" class="form-control" name="username" id="username" placeholder="Enter a username"
              onkeyup="check(this.value)">
            </div>

            <div class="form-group">
              <label for="firstName">First name</label>
              <label id="alert_firstname">You should enter your first name</label>
              <input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
            </div>

            <div class="form-group">
              <label for="lastName">Last name</label>
              <label id="alert_lastname">You should enter your last name</label>
              <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Enter your last name">
            </div>

            <div class="form-group">
              <label for="input_password">Password </label>
              <label id="alert_password">You should enter a password</label>
              <input type="password" class="form-control" name="input_password" id="input_password" placeholder="Password">
            </div>

            <div class="form-group">
              <label for="input_password2">Password </label>
              <label id="alert_password2">You should enter a password</label>
              <label id="alert_samepassword">Password and confirmation should be the same</label>
              <input type="password" class="form-control" id="input_password2" placeholder="Confirm your password">
            </div>

            <div class="form-group">
              <label for="email">Email</label>
              <label id="alert_email">You should enter your email</label>
              <input type="email" class="form-control" name="email" id="email" placeholder="Enter a valid email">
            </div>

            <button type="submit" class="btn btn-primary btn-default">Sign up</button>
            <button type="button" class="btn btn-success" onclick="window.location.href='/signin'">Already have an account?</button>
          </form>
        </div>
      </div>
  </div>
</body>

</html>
	<head>
	<title> Sign up </title>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<link rel="stylesheet" href="/css/signup.css">
	<script type="text/javascript">


	function validate_form() {
	let username = document.getElementById('username').value;
	let firstName = document.getElementById('firstName').value;
	let lastName = document.getElementById('lastName').value;
	let email = document.getElementById('email').value;
	let input_password = document.getElementById('input_password').value;
	let input_password2 = document.getElementById('input_password2').value;

	if (username == "" \| username == null)
	document.getElementById('username').style.display = 'block';
	if (firstName == "" \| firstName == null)
	document.getElementById('alert_firstname').style.display = 'block';
	if (lastName == "" \| lastName == null)
	document.getElementById('alert_laname').style.display = 'block';
	if (email == "" \| email == null)
	document.getElementById('alert_email').style.display = 'block';
	if (input_password == "" \| input_password == null)
	document.getElementById('alert_password').style.display = 'block';
	if (input_password2 == "" \| input_password2 == null)
	document.getElementById('alert_password2').style.display = 'block';
	if (input_password != "" && input_password2 != "" && input_password != input_password2)
	document.getElementById('alert_samepassword').style.display = 'block';

	return (username != "") &&
	(firstName != "") &&
	(lastName != "") &&
	(email != "") &&
	(input_password != "") &&
	(input_password2 != "");
	}
	</script>
	</head>

	<body>
	<div class="col-md-4">
	<div class="panel panel-default">
	<div class="panel-heading"><h3 class="panel-title"><strong>Sign up </strong></h3></div>
	<div class="panel-body">
	<form role="form" method="POST" action="/signup" onsubmit="return validate_form();">
	<div class="form-group">
	<label for="username">Username</label>
	<label id="alert_username">You should enter a username</label>
	<h3 id="taken"> </h3>
	<input type="text" class="form-control" name="username" id="username" placeholder="Enter a username"
	onkeyup="check(this.value)">
	</div>

	<div class="form-group">
	<label for="firstName">First name</label>
	<label id="alert_firstname">You should enter your first name</label>
	<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Enter your first name">
	</div>

	<div class="form-group">
	<label for="lastName">Last name</label>
	<label id="alert_lastname">You should enter your last name</label>
	<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Enter your last name">
	</div>

	<div class="form-group">
	<label for="input_password">Password </label>
	<label id="alert_password">You should enter a password</label>
	<input type="password" class="form-control" name="input_password" id="input_password" placeholder="Password">
	</div>

	<div class="form-group">
	<label for="input_password2">Password </label>
	<label id="alert_password2">You should enter a password</label>
	<label id="alert_samepassword">Password and confirmation should be the same</label>
	<input type="password" class="form-control" id="input_password2" placeholder="Confirm your password">
	</div>

	<div class="form-group">
	<label for="email">Email</label>
	<label id="alert_email">You should enter your email</label>
	<input type="email" class="form-control" name="email" id="email" placeholder="Enter a valid email">
	</div>

	<button type="submit" class="btn btn-primary btn-default">Sign up</button>
	<button type="button" class="btn btn-success" onclick="window.location.href='/signin'">Already have an account?</button>
	</form>
	</div>
	</div>
	</div>
	</body>

	</html>