Better form validations

Better form validations.markdown

Better form validations

https://medium.com/@stothelios/better-form-validations-aab931448706

A Pen by Stelios Constantinides on CodePen.

License.

index.html

<form>
  <div class='row'>
    <label for='username'>Username</label>
    <div class='info'>
      &#8627;
      <span class='length'>at least 5 characters long,</span>
      <span class='spaces'>no spaces</span>
      <div class='availability hidden'>
        &#8627;
        <span class='error'>name is already taken</span>
      </div>
    </div>
    <input type='text' id='username' placeholder='johnnysmith'>
  </div>
  <div class='row'>
    <label for='password'>Password</label>
    <div class='info'>
      &#8627;
      <span class='length'>at least 5 characters long</span>
    </div>
    <input type='password' id='password' placeholder='&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;'>
  </div>
  <div class='row'>
    <input type='submit' id='submit' value='Register'>
  </div>
</form>

script.js

// Real-time username checks
$('#username').keyup(function() {
  checkSpaces($(this));
  checkRemoveLengthError($(this));
  checkAvailability($(this));
  checkRemovePresenceError($(this));
});

// Real-time password checks
$('#password').keyup(function() {
  checkRemoveLengthError($(this));
  checkRemovePresenceError($(this));
});

// Check lengths on blur
$('#username, #password').blur(function() {
  checkLength($(this));
});

// Check all on submit
$('#submit').click(function(event) {
  event.preventDefault();

  var valid_username = checkSpaces($('#username')) &&
                       checkLength($('#username')) &&
                       checkPresence($('#username')) &&
                       checkAvailability($('#username'));
  var valid_password = checkLength($('#password')) && checkPresence($('#password'));

  if (valid_username && valid_password) {
    alert('Success!');
  }
});

// Error checking functions

function checkSpaces(target) {
  var value = target.val();
  var label = target.prev('.info').children('.spaces');

  if (value.includes(' ')) {
    label.addClass('error');
  } else {
    label.removeClass('error');
    return true;
  }
}

function checkLength(target) {
  var value = target.val();
  var label = target.prev('.info').children('.length');

  if (value.length > 0 && value.length < 5) {
    label.addClass('error');
  } else {
    label.removeClass('error');
    return true;
  }
}

function checkRemoveLengthError(target) {
  var value = target.val();
  var label = target.prev('.info').children('.length');

  if (value.length == 0 || value.length >= 5) {
    label.removeClass('error');
  }
}

function checkAvailability(target) {
  // Pseudo AJAX check of whether name is available
  var value = target.val();
  var label = target.prev('.info').children('.availability');

  if (value == 'stelios') {
    label.removeClass('hidden');
  } else {
    label.addClass('hidden');
    return true;
  }
}

function checkPresence(target) {
  var value = target.val();
  var label = target.siblings('label');
  
  if (value.length == 0) {
    label.addClass('error');
  } else {
    label.removeClass('error');
    return true;
  }
}

function checkRemovePresenceError(target) {
  var value = target.val();
  var label = target.siblings('label');
  
  if (value.length > 0) {
    label.removeClass('error');
  }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body
  padding: 20px
  font-family: 'Lato', sans-serif
  font-weight: 300
  color: #000
  
.hidden
  display: none
  
.error
  color: firebrick
  font-weight: 700
  
form
  background: #eee
  display: inline-block
  padding: 0 30px
  border-radius: 5px

.row
  margin: 30px 0

label
  display: block
  margin-bottom: 4px
  font-weight: 700
  
.info
  font-size: 0.8em
  font-weight: 300

input
  border: none
  border-bottom: 1px solid #000
  background: transparent
  width: 220px
  padding: 5px
  margin-top: 5px
  font-weight: 400
  
  &:focus
    outline: none
  
  &[type=submit]
    padding: 10px 0
    width: 100%
    border: 1px solid #000
    cursor: pointer
    
    &:hover
      background-color: #000
      color: #eee