JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Form Validation1</title>
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="js/validate.js"></script>
</head>
<body>
<div class="container" id="container">
<form action="form2.html" novalidate>
<div class="border">
    <h3>Register New User</h3>
    <div class="form-group">
        <label for="username"></label>
        <input type="text" title="Username must be between 8-12 letters" pattern="[A-Za-z]{8,12}" class="form-control" id="username" placeholder="Enter username" onblur="return validateErrors('username','usernameError')">`
        <span id="usernameError" style="display: none;"></span> 
    </div>
    <div class="form-group">
        <label for="password"></label>
        <input type="password" title="at least eight symbols containing at least one number, one lower, and one upper letter" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required class="form-control" id="password" placeholder="Enter password" onblur="return validateErrors('password','passwordError')">
        <span id="passwordError" style="display: none;"></span> 
    </div>
</div>
<div class="border">
    <h3>Personal Details</h3>
    <div class="form-group">
        <label for="Name"></label>
        <input type="text" class="form-control" id="name" placeholder="Enter name">
        <span id="nameError" style="display: none;"></span> 
    </div>
    <div class="form-group">
        <label for="Address"></label>
        <input type="text" class="form-control" id="address" placeholder="Enter Address">
        <span id="addressError" style="display: none;"></span> 
    </div>
    <div class="form-group">
        <label for="Suburb"></label>
        <input type="Suburb" class="form-control" id="suburb"...

JavaScript

function validatePostcode(){
	alert("onblur triggered!");
  var postcodeRegEx = /^5[0-9]{3}$/; 
  var postcodeResult = postcodeRegEx.test(postcode);
  if (postcodeResult == false){
    alert("Postcode is not valid!");
  } 
  return true;
}