All frontend Validations

by Faisal Khan Janjua

HTML

<div class="form-field">
  <label>Numbers Only with No space</label>
  <input type="text" class="numbersOnly" />
</div>

<div class="form-field">
  <label>Alphabets Only</label>
  <input type="text" class="alphabetsOnly" />
</div>

<div class="form-field">
  <label>Alphanumeric Only</label>
  <input type="text" class="alphanumeric" />
</div>

<div class="form-field">
  <label>Allow Decimals</label>
  <input type="text" class="allowDecimals" />
</div>

<div class="form-field">
  <label>Validate Email</label>
  <input type="text" class="validateEmail" />
</div>

<div class="form-field">
  <label>Required (on blur)</label>
  <input type="text" class="requiredField" />
</div>

<div class="form-field">
  <label>Required Select (on blur)</label>
  <select class="requiredSelect">
    <option>-- Please Select --</option>
    <option value="">Null</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <em>If value is not defined in HTML, Text will be treated as Value. for checking null values in select put value=""</em>
</div>

SCSS

.form-field {
  margin-bottom: 20px;
  & label, & em {
    display: block;
  }
  & input, & select {
    outline: none;
    min-width: 250px;
    padding: 8px 14px;
    border: 2px solid #ddd;
    box-sizing: border-box;
    &:focus {
      border: 2px solid #999;
    }
    &.error {
      border: 2px solid #F00;
    }
  }
}

JavaScript

// Validations Start
$(document).on('input', '.numbersOnly', function () {
  this.value = this.value.replace(/[^0-9]+/g, '');
});
$(document).on('mouseenter paste', '.numbersOnly', function () { // Prevent Paste & Drag
  var val = $(this).val();
  val = val.replace(/[^0-9]+/g, "");
  $(this).val(val);
});
$(document).on('input', '.alphabetsOnly', function () {
  this.value = this.value.replace(/[^A-Za-z ]/g, '');
});
$(document).on('mouseenter paste', '.alphabetsOnly', function () { // Prevent Paste & Drag
  var val = $(this).val();
  val = val.replace(/[^A-Za-z ]+/g, "");
  $(this).val(val);
});
$(document).on('input', '.alphanumeric', function () {
  this.value = this.value.replace(/[^A-Za-z0-9 ]/g, '');
});
$(document).on('mouseenter paste', '.alphanumeric', function () { // Prevent Paste & Drag
  var val = $(this).val();
  val = val.replace(/[^A-Za-z0-9 ]+/g, "");
  $(this).val(val);
});
$(document).on("keypress", ".allowDecimals", function (evt) {
  if(evt.key=='%'){
    return false;
  }
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 8 || charCode == 37) {
    return true;
  } else if (charCode == 46 && $(this).val().indexOf('.') != -1) {
    return false;
  } else if (charCode > 31 && charCode != 46 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
});
$(document).on("blur mouseenter paste", ".allowDecimals", function () {
  var val = $(this).val();
  val = val.replace(/[^0-9\.]+/g, "");
  $(this).val(val);
});
$(document).on('input', '.validateEmail', function () {
  this.value = this.value.replace(/[^A-Za-z0-9\.\-_@]/g, '');
});
$(document).on('mouseenter paste', '.validateEmail', function () { // Prevent Paste & Drag
  var val = $(this).val();
  val = val.replace(/[^A-Za-z0-9\.\-_@]+/g, "");
  $(this).val(val);
});
$(document).on('blur input', '.validateEmail', function () {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  if (!emailReg.test($(this).val()))...