Form Input Confirmation

by bowheart

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form class="form-step-one" name="form-one" data-nextpage="order">
  <fieldset class="fs1">
    <div class="input-field">
      <label>First Name</label>
      <input type="text" name="firstName" data-filter="a-zA-Z" placeholder="" required="">
    </div>
    <div class="input-field">
      <label>Last Name</label>
      <input type="text" name="lastName" data-filter="a-zA-Z" placeholder="" required="">
    </div>
    <div class="input-field">
      <label>Address</label>
      <input type="text" name="address1" data-filter="a-zA-Z0-9 #" placeholder="" required="">
    </div>
    <div class="input-field">
      <label>ZIP</label>
      <input type="tel" name="zip" data-filter="0-9" data-length="5" placeholder="" required="">
    </div>
  </fieldset>
  <fieldset class="fs2">
    <div class="input-field">
      <label>City</label>
      <input type="text" name="city" data-filter="a-zA-Z0-9 #" placeholder="" required="">
    </div>
    <div class="input-field">
      <label>State</label>
      <select name="state" required="">
        <option value="" disabled="" selected=""></option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option...

SCSS

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.input-field {
  margin: 10px 0 0;
  max-width: 300px;
}
label {
  display: inline-block;
  width: 120px;
}
input, select {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 4px;
  width: 160px;
  
  + .valid-marker {
    opacity: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    
    i {
      display: inline-block;
      vertical-align: middle;
    }
    &::after {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }
}
.invalid-input {
  border-color: #f88;
  box-shadow: inset 0 0 20px 500px #fff9f9, 0 0 0 1px #f88;
}
.valid-input {
  border-color: #8f8;
  box-shadow: inset 0 0 20px 500px #f9fff9, 0 0 0 1px #8f8;
}

input[type="submit"] {
  display: none;
}

JavaScript

(function() {
  $('input:not([type="submit"])').blur(function() {
    handleBlur.call(this);
  });
  $('select').focusout(function() {
    handleBlur.call(this);
  });

  var handleBlur = function() {
    var val = $(this).val(),
      name = $(this).prop('name').toLowerCase(),
      valid = name.indexOf('zip') > -1 ? isValidZip(val)
        : name.indexOf('cvv') > -1 ? isValidCVV(val)
        : name.indexOf('phone') > -1 || name.indexOf('creditcard') > -1 ? isValidMask(val)
        : name.indexOf('email') > -1 ? isValidEmail(val)
        : val && val.length;

    valid ? markValid.call(this) : markInvalid.call(this);
  };

  var markInvalid = function() {
    $(this).removeClass('valid-input').addClass('invalid-input');
    var marker = $(this).siblings('.valid-marker');

    if (marker.length) {
      if (marker.find('i').hasClass('fa-times')) return;

      marker.stop().animate({right: 0, opacity: 0}, 150, function() {
        $(this).css('color', '#f66').find('i').removeClass('fa-check').addClass('fa-times');
        $(this).animate({right: 20, opacity: 1}, 150);
      });
    } else {
      createMarker.call(this);
    }
  };
  var markValid = function() {
    $(this).removeClass('invalid-input').addClass('valid-input');
    var marker = $(this).siblings('.valid-marker');

    if (marker.length) {
      if (marker.find('i').hasClass('fa-check')) return;

      marker.stop().animate({right: 0, opacity: 0}, 150, function() {
        $(this).css('color', '#6f6').find('i').removeClass('fa-times').addClass('fa-check');
        $(this).animate({right: 20, opacity: 1}, 150);
      });
    } else {
      createMarker.call(this, true);
    }
  };

  var createMarker = function(valid) {
    var marker = $('<span class="valid-marker"><i class="fa fa-' + (valid ? 'check' : 'times') + '"></i></span>').css({
      color: valid ? '#6f6' : '#f66',
    });
    getOffset.call(this);
    $(this).after(marker).parent().css('position', 'relative');
    marker.animate({right:...