JS Simple Validations

by katalin_2003

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/js-simple-validations@latest/dist/js-simple-validations.js"></script>
<div class="container" style="width: 600px;">
  <h3>Mega Form</h3>
  <p>Please fill out these fields and stuff</p>
  <form role="form" class="form" method="POST" data-jsv-form="true" data-jsv-submit-handler="customSubmitHandler" data-jsv-disable-icons="false" data-jsv-disable-invalid="true" data-jsv-form-valid-callback="formValidCallback" data-jsv-form-invalid-callback="formInvalidCallback" data-jsv-form-invalid-message="Please correct the errors below" data-jsv-form-incomplete-tooltip="Please complete all fields">
    <div class="form-group">
      <label for="test-email">E-Mail Address</label>
      <input type="text" id="test-email" name="Login" data-jsv-validators="require, email, ajax" data-jsv-ajax-endpoint="https://api.github.com/users/tarponjargon" data-jsv-ajax-key="company" data-jsv-ajax-value="" data-jsv-ajax-processing="Checking login..." data-jsv-field-invalid-callback-ajax="usernameFail" data-jsv-field-valid-callback-ajax="usernameSuccess" data-jsv-field-error-ajax="Login does not exist" data-jsv-field-error-require="Please enter an e-mail" data-jsv-field-error-email="Please check your E-Mail format" placeholder="E-Mail Address ([email protected] will validate via ajax)" data-jsv-debounce="800" class="form-control" />
    </div>
    <div class="form-group">
      <label for="test-password">Desired Password</label>
      <input type="password" name="Password" id="test-password" data-jsv-validators="require,length" data-jsv-min="6" data-jsv-max="20" placeholder="6-20 Characters" class="form-control" />
    </div>
    <div class="form-group">
      <label for="test-confirm-password">Confirm Password</label>
      <input type="password" name="ConfirmPassword" id="test-confirm-password" placeholder="Confirm Password"...

JavaScript

// customizations for js-simple-valiadtions
window.validateOptions = {
  // config overrides
  cfg: {
    useCss: true
  },

  // custom validators
  customValidators: {
    "alphanum": { // name of custom validator
      "events": [], // experimental - array containing events this validator should fire on, [] = all
      "validator": function(field, value, validator) { // boilerplate
        return new Promise(function(resolve, reject) { // boilerplate

          // start custom validator code
          let re = /^[a-z0-9]+$/;
          let isValid = (typeof value !== 'undefined' && /\S/.test(value) && re.test(value));
          if (isValid) {
            resolve();
          } else {
            reject("Should be only letters and numbers"); // include message in reject
          }
          // end custom validator code

        });
      }
    } // end 'alphaNum' customvalidator
  }
};

// callback tests
var customSubmitHandler = function(e, form, state) {
  var returnVal = {
    message: "customSubmitHandler callback fired",
    args: arguments
  }
  console.log("customSubmitHandler", returnVal);
  return returnVal;
};
var formValidCallback = function(e, form, state) {
  var returnVal = {
    message: "formValidCallback callback fired",
    args: arguments
  }
  console.log("formValidCallback", returnVal);
  return returnVal;
};
var formInvalidCallback = function(e, form, state) {
  var returnVal = {
    message: "formInvalidCallback callback fired",
    args: arguments
  }
  console.log("formInvalidCallback", returnVal);
  return returnVal;
};
var usernameFail = function(e, form, fieldName, validator, state) {
  var returnVal = {
    message: "usernameFail callback fired",
    args: arguments
  }
  console.log("usernameFail", returnVal);
  return returnVal;
}
var usernameSuccess = function(e, form, fieldName, validator, state) {
  var returnVal = {
    message: "usernameSuccess callback fired",
    args: arguments
  }
  console.log("usernameSuccess",...