$(document).ready(function() {

  $("#avatar").click(function(e) {
    e.stopPropagation();
    $(".myModal").fadeIn();

  });

  $(".closeButton").click(function(e) {
    e.stopPropagation();
    $(".myModal").fadeOut();

  });

  $("body").click(function(e) {
    e.stopPropagation();
    $(".myModal").fadeOut();

  });

  $(".avatarSelect").click(function(e) {
    e.stopPropagation();
  });


  //validating form

  var error = [];
  var errorlen = error.length;


  $('#username').on('input', function() {
    var username = $(this).val();

    if (username.length < 6) {
      $('.one').html('Required: Username must be greater than 6 characters.');
      $('.one').addClass('errorBox');
      error.push('a');

    } else {
      $('.one').html('');
      $('.one').removeClass('errorBox');

    }
  })

  $('#password').on('input', function() {
    var password = $(this).val();

    if (password.length < 6) {
      $('.two').html('Required: Password must be greater than 6 characters.');
      $('.two').addClass('errorBox');
      error.push('b');
    } else {
      $('.two').html('');
      $('.two').removeClass('errorBox');
    }
  })

  $('#cfmpassword, #password').on('change', function() {
    var password = $('#password').val();
    var cfmpassword = $('#cfmpassword').val();

    if (password !== cfmpassword) {
      $('.three').html('Required: Confirmed password must match password.');
      $('.three').addClass('errorBox');
      error.push('c');
    } else {
      $('.three').html('');
      $('.three').removeClass('errorBox');
    }
  })

  $('#email').on('input', function() {
    var email = $(this).val();
    var regemail = /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i;


    if (email.length < 3) {
      $('.four').html('Required: Email must be longer than 3 characters!');
      $('.four').addClass('errorBox');
      error.push('d');
    } else if (regemail.test(email) == false) {
      $('.five').html('Required: Email must be a valid email.');
      $('.five').addClass('errorBox');
      error.push('e');
    } else {
      $('.four', '.five').html('');
      $('.four', 'five').removeClass('errorBox');
    }
  })

  $('#termsCheckbox').on('click', function() {
    var terms = $('#termsCheckbox').prop('checked');

    if (!terms) {
      $('.six').html('Required: Terms and Conditons must be accepted.');
      $('.six').addClass('errorBox');
      error.push('f');
    } else {
      $('.six').html('');
      $('.six').removeClass('errorBox');
    }
  })

  $('.avatarInput').on('click', function() {
    var radio = $('.avatarInput:checked').val();

    if (!radio) {
      $('.seven').html('Required: An avatar must be selected.');
      $('.seven').addClass('errorBox');
      error.push('g');
    } else {
      $('.seven').html('');
      $('.seven').removeClass('errorBox');
    }
  })

    for (x = 0; x < errorlen; x++) {
      $('#_registerForm').css('grid-template-row', +errorlen * 25 + "px 50px 50px 50px 50px 20px 50px");
    }


})

* {
  font-family: helvetica;
}

body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: ". . ." ". center ." ". . .";
}

.formSection {
  grid-area: center;
  width: 400px;
  justify-self: center;
  align-self: center;
}

#_registerForm {
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 250px 50px 50px 50px 50px 20px 50px;
  grid-template-areas: "error error" "user user" "password confirm" "email email" "avatar avatar" "terms terms" "submit submit";
  grid-gap: 7px 3px;
}

#username {
  grid-area: user;
}

#password {
  grid-area: password;
}

#cfmpassword {
  grid-area: confirm;
}

#email {
  grid-area: email;
}

#avatar {
  grid-area: avatar;
}

.termsDiv {
  grid-area: terms;
}

#submit {
  grid-area: submit;
}

.message {
  grid-area: error;
  margin: 0px;
  padding: 5px;
  font-size: 14px;
  color: white;
}

.avatarSelect {
  grid-area: center;
  background-color: #f4f4f4;
  width: 400px;
  height: 600px;
  overflow-y: scroll;
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

#avatarImage {
  height: 90px;
}

.avatarInput {
  position: absolute;
  visibility: hidden;
}

#avatarLabel > .avatarInput + #avatarImage {
  transition: all ease-in-out 0.5s;
  cursor: pointer;
}

#avatarLabel > .avatarInput:checked + #avatarImage {
  transform: scale(0.8);
  cursor: pointer;
}

#member {
  font-size: 12px;
  margin: 0px;
  padding-bottom: 5px;
}

h2 {
  margin: 0px;
  padding: 0px;
}

.myModal {
  display: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}

.closeButton {
  color: #ccc;
  float: right;
  font-size: 30px;
  transition: all ease-in-out 0.5s;
}

.closeButton:hover,
.closeButton:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modalGrid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: ". center ." ". center . " ". center .";
  align-items: center;
  justify-items: center;
}

.errorBox {
  background-color: rgb(255, 124, 124);
  padding: 5px;
}

.successBox {
  background-color: rgb(124, 255, 141);
  padding: 5px;
}

<body>
  <div class='formSection'>
    <h2>Please Sign Up!</h2>
    <p id='member'> Already a Member? <a href='#'>Login</a></p>

    <form method='post' action='../_backendLoginSystem/register.php' autocomplete='off' id='_registerForm'>

      <div class='message'>

        <p class=' one'></p>
        <p class=' two'></p>
        <p class=' three'></p>
        <p class=' four'></p>
        <p class=' five'></p>
        <p class=' six'></p>
        <p class=' seven'></p>

      </div>

      <input type='text' name='username' id='username' autocomplete='off' placeholder='Username' maxlength="25">
      <input type='password' name='password' id='password' autocomplete='off' placeholder='Password' maxlength="30">
      <input type='password' name='cfmpassword' id='cfmpassword' autocomplete='off' placeholder='Confirm Password' maxlength="30">
      <input type='email' name='email' id='email' autocomplete='off' placeholder='Email' maxlength="50">
      <button type='button' id='avatar'>Select an Avatar</button>
      <div class='termsDiv'>
        <input type='checkbox' name='termsCheckbox' id='termsCheckbox'>
        <label for='termsCheckbox'>I agree to the <a href='#'>Terms and Conditions</a></label>
      </div>
      <input type='submit' name='submit' value='Create Account!' id='submit'>

    </form>

  </div>

  <div class='myModal' id='modal'>
    <div class='modalGrid'>
      <div class='avatarSelect'>
        <span class='closeButton'>&times;</span>
        <?php

    $imageFile = "../img/avatars/";
    $imageLoop = glob($imageFile. '*.*' , GLOB_BRACE);

    foreach($imageLoop as $image){
        echo "<label id='avatarLabel'><input type='radio' class='avatarInput' name='avatar' value='$image' >
        <img src='$image' id='avatarImage'></label>";
    }

    ?>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='../_frontendLoginSystem/register.js'></script>