If function is true then do this – Blancer.com Tutorials and projects

I’m trying to figure out how to make this work.

I want the validation function to check if all the user inputs are true, then a message in success ID will show You have successfully created an account. once the submit button is clicked.

HTML:

<html>
  <head>
    <title>Simple Registration Form</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <form id="myForm" action="#">
      <div class="container">
        <div class="content">
          <label>
            First name:
            <br /><input
              type="text"
              id="fname"
              placeholder="Enter first name"
            /><br />
            <span class="notif" id="fn"></span><br />
          </label>

          <label>
            Last name:
            <br /><input
              type="text"
              id="lname"
              placeholder="Enter last name"
            /><br />
            <span class="notif" id="ln"></span><br />
          </label>

          <label>
            Birthdate:
            <br /><input
              type="date"
              id="birthdate"
              placeholder="Enter birthdate"
            /><br />
            <span class="notif" id="bday"></span>
          </label>

          <label>
            <br />Gender: <br /><select id="gender">
              <option value="select">Select</option>
              <option value="male">Male</option>
              <option value="female">Female</option></select
            ><br />
            <span class="notif" id="gndr"></span><br />
          </label>
        </div>
        <div class="content">
          <label>
            Username:
            <br /><input
              type="text"
              id="username"
              placeholder="Enter username"
              pattern="[a-zA-Z]+"
            /><br />
            <span class="notif" id="usr"></span><br />
            <div id="msg">
              <p id="alphabets" class="invalid">Alphabets only.</p>
            </div>
            <br />
          </label>

          <label>
            E-mail:
            <br /><input
              type="email"
              id="email"
              placeholder="Enter e-mail"
            /><br />
            <span class="notif" id="eml"></span><br />
            <div id="emlForm">
              <p id="emailFormat" class="invalid">Invalid format.</p>
            </div>
            <br />
          </label>

          <label>
            Confirm E-mail:
            <br /><input
              type="email"
              id="econf"
              placeholder="Retype e-mail"
            /><br />
            <span class="notif" id="rt-eml"></span><br />
          </label>

          <label>
            Password:
            <br /><input
              type="password"
              id="password"
              placeholder="Enter password"
            /><br />
            <span class="notif" id="pass"></span><br />
            <div id="message">
              <p id="letter" class="invalid">Lowercase letter</p>
              <p id="capital" class="invalid">Uppercase letter</p>
              <p id="number" class="invalid">Number</p>
              <p id="special" class="invalid">Special character</p>
              <p id="length" class="invalid">Minimum 8 characters</p>
            </div>
            <br />
          </label>

          <label>
            Confirm Password:
            <br /><input
              type="password"
              id="pconf"
              placeholder="Retype password"
            /><br />
            <span class="notif" id="rt-pass"></span><br />
          </label>
        </div>

        <div>
          <input
            type="submit"
            class="btn"
            onclick="validation(); validatePassword();"
            value="Submit"
          />
          <input
            type="reset"
            class="btn"
            id="reset"
            onclick="resetErrors();"
            value="Reset"
          />
          <br /><br />
        </div>
        <br /><span class="notif" id="success"></span><br />
      </div>
    </form>
    <script src="script.js"></script>
  </body>
</html>

JS:

function validation() {
  var fname = document.getElementById('fname').value;
  if (fname == '') {
    document.getElementById('fn').innerHTML = 'Please enter first name.';
  }
  var lname = document.getElementById('lname').value;
  if (lname == '') {
    document.getElementById('ln').innerHTML = 'Please enter last name.';
  }
  var birth = document.getElementById('birthdate').value;
  if (birth == '') {
    document.getElementById('bday').innerHTML = 'Please enter birthdate.';
  }
  var gender = document.getElementById('gender').value;
  if (gender == 'select') {
    document.getElementById('gndr').innerHTML = 'Please choose your gender.';
  }
  var username = document.getElementById('username').value;
  if (username == '') {
    document.getElementById('usr').innerHTML = 'Please enter username.';
  }
  var email = document.getElementById('email').value;
  if (email == '') {
    document.getElementById('eml').innerHTML = 'Please enter email.';
  }
  var econf = document.getElementById('econf').value;
  if (econf == '') {
    document.getElementById('rt-eml').innerHTML = 'Please confirm your email.';
  }
  if (econf != email) {
    document.getElementById('rt-eml').innerHTML = 'Email did not match.';
  }
  var password = document.getElementById('password').value;
  if (password == '') {
    document.getElementById('pass').innerHTML = 'Please enter password.';
  }
  var pconf = document.getElementById('pconf').value;
  if (pconf == '') {
    document.getElementById('rt-pass').innerHTML =
      'Please confirm your password.';
  }
  if (pconf != password) {
    document.getElementById('rt-pass').innerHTML =
      'Password did not match. Try again. ';
  }
}

function reset() {
  document.getElementById('myForm').reset();
}

function resetErrors() {
  document.querySelectorAll('.notif').forEach(el => (el.innerHTML = ''));
}

var alphabetInput = document.getElementById('username');
var alphabets = document.getElementById('alphabets');

alphabetInput.onfocus = function () {
  document.getElementById('msg').style.display = 'block';
};

alphabetInput.onblur = function () {
  document.getElementById('msg').style.display = 'none';
};

alphabetInput.onkeyup = function () {
  var alphabetOnly = /^[A-Za-z]+$/;
  if (alphabetInput.value.match(alphabetOnly)) {
    alphabets.classList.remove('invalid');
    alphabets.classList.add('valid');
  } else {
    alphabets.classList.add('valid');
    alphabets.classList.add('invalid');
  }
};

var emailInput = document.getElementById('email');
var emailFormat = document.getElementById('emailFormat');

emailInput.onfocus = function () {
  document.getElementById('emlForm').style.display = 'block';
};

emailInput.onblur = function () {
  document.getElementById('emlForm').style.display = 'none';
};

emailInput.onkeyup = function () {
  var emlFormat = /[@]/;
  if (emailInput.value.match(emlFormat)) {
    emailFormat.classList.remove('invalid');
    emailFormat.classList.add('valid');
  } else {
    emailFormat.classList.add('valid');
    emailFormat.classList.add('invalid');
  }
};

var myInput = document.getElementById('password');
var letter = document.getElementById('letter');
var capital = document.getElementById('capital');
var number = document.getElementById('number');
var length = document.getElementById('length');
var special = document.getElementById('special');

myInput.onfocus = function () {
  document.getElementById('message').style.display = 'block';
};

myInput.onblur = function () {
  document.getElementById('message').style.display = 'none';
};

myInput.onkeyup = function () {
  var lowerCaseLetters = /[a-z]/g;
  if (myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove('invalid');
    letter.classList.add('valid');
  } else {
    letter.classList.remove('valid');
    letter.classList.add('invalid');
  }

  var specialCharacters = /[!@#$%^&*]/g;
  if (myInput.value.match(specialCharacters)) {
    special.classList.remove('invalid');
    special.classList.add('valid');
  } else {
    special.classList.remove('valid');
    special.classList.add('invalid');
  }

  var upperCaseLetters = /[A-Z]/g;
  if (myInput.value.match(upperCaseLetters)) {
    capital.classList.remove('invalid');
    capital.classList.add('valid');
  } else {
    capital.classList.remove('valid');
    capital.classList.add('invalid');
  }

  var numbers = /[0-9]/g;
  if (myInput.value.match(numbers)) {
    number.classList.remove('invalid');
    number.classList.add('valid');
  } else {
    number.classList.remove('valid');
    number.classList.add('invalid');
  }

  if (myInput.value.length >= 8) {
    length.classList.remove('invalid');
    length.classList.add('valid');
  } else {
    length.classList.remove('valid');
    length.classList.add('invalid');
  }
};

var their_date = new Date(2010, 6, 17);
var today = new Date();
var date2 = new Date(
  today.getFullYear(),
  today.getMonth() + 1,
  today.getDate()
);
var diff = new Date(date2.getTime() - their_date.getTime());
console.log(diff.getUTCFullYear() - 1970); // Gives difference as year

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  top: 20%;
}

.container {
  top: 100px;
  position: relative;
  width: 450px;
  max-width: 100%;
  grid-column-gap: 50px;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  border-radius: 5px;
}

.content {
  margin: 0;
  padding: 0;
}

.btn {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 70px;
  height: 25px;
  cursor: pointer;
  align-items: center;
  border-radius: 5px;
}

.btn:active {
  background-color: rgb(190, 190, 190);
}

.notif {
  font-size: 11px;
  color: red;
}

input[type='date'] {
  overflow: hidden;
  padding: 0;
  width: 140px;
  -webkit-padding-start: 1px;
  border-radius: 5px;
  padding-left: 0.5em;
  font-size: 12px;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  border-radius: 5px;
  padding-left: 0.5em;
  width: 180px;
  font-size: 12px;
}

span[id='success'] {
  color: rgb(0, 202, 0);
}

#message {
  display: none;
  background: #ffffff;
  color: #000;
  padding: 0;
  margin-top: 0;
  margin-left: 5px;
}

#message p {
  padding: 1px 2px;
  font-size: 12px;
}

/* Add a green text color and a "✔" when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -3px;
  content: '✔';
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: '✖';
}

:required {
  background: red;
}

#msg {
  display: none;
  background: #ffffff;
  color: #000;
  padding: 0;
  margin-top: 0;
  margin-left: 5px;
}

#msg p {
  padding: 1px 2px;
  font-size: 12px;
}

/* Add a green text color and a "✔" when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -3px;
  content: '✔';
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: '✖';
}

:required {
  background: red;
}

#emlForm {
  display: none;
  background: #ffffff;
  color: #000;
  padding: 0;
  margin-top: 0;
  margin-left: 5px;
}

#emlForm p {
  padding: 1px 2px;
  font-size: 12px;
}

/* Add a green text color and a "✔" when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -3px;
  content: '✔';
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: '✖';
}

:required {
  background: red;
}

How can I make this work?