ViValid - Demo: Sync and Async validations

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://cdn.rawgit.com/pazams/vivalid/0.2.0/dist/vivalid-bundle.js"></script>
  <script src="https://cdn.rawgit.com/pazams/vivalid-rules-core/master/dist/vivalid-rules-core-bundle.min.js"></script>
  <script src="demo-utils.js"></script>
  <script src="demo.js"></script>

</head>

<body>
  <!-- 
  inline css styles to make the exmaple work as a standalone 
  without a css file other than boostrap 
  -->

  <form data-vivalid-pending-ui='["pendingUiStart", "pendingUiStop"]' data-vivalid-on-validation='["onValidationSuccess", "onValidationFailure"]' data-vivalid-group='' id="MainForm">

    <div class="container" style="margin-top: 5px;">
      <div class="row">

        <div class="col-sm-7">

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Form</h3> </div>
            <div class="panel-body" style="height: 500px; overflow: auto;">

              <div class="form-group">
                <label class="control-label">Sync validation</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}]]' placeholder="Required" />
              </div>
              <div class="form-group">
                <label class="control-label">Async validation</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}],["exisitingUserBob",{}]]' placeholder="Required , exisitingUserBob" />
              </div>
              <div>
                <input type="button" class="btn btn-primary" data-vivalid-submit="" value="send" id="SendButton" />
                <input type="button" class="btn btn-primary" data-vivalid-reset="" value="reset validation" />
              </div>

              <div style="background-color: #eee; margin-top: 15px; padding: 10px; font-size: 16px; line-height: 28px;">
                <p>To simulate a pending state transition, type anything in the first input, type "bob" in the second input, and quickly press "send", and wait.
                <br/>Note the peding UI changes.
                <br/><code>exisitingUserBob</code> defined in demo.js and referenced via data attribute, mocks an async ajax call to a backend to verify if the user exists.
                </p>
              </div>

            </div>

          </div>

        </div>
        <div class="col-sm-5">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Logger</h3> </div>
            <div class="panel-body" style="height: 500px; overflow: auto;">
              <span id="CleanLog" class="btn btn-link">X (clear)</span>
              <div id="Log"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

(function(){
  
"use strict";

window.demo = function(){

var addValidatorBuilder = vivalid.validatorRepo.addBuilder;
var addCallback = vivalid.htmlInterface.addCallback;
var initAllValidations = vivalid.htmlInterface.initAll;
var demoUtils = window.demoUtils;

addCallback('onValidationSuccess', function() {
  demoUtils.messageLog('<span class="label label-success">valid group</span> and form will submit');
  // form.submit() ...
});

addCallback('onValidationFailure', function(invalid, pending, valid) {
  demoUtils.messageLog('<span class="label label-danger">invalid group</span> (  ' + invalid + ' invalid, ' + pending + ' pending, and ' + valid + ' valid )');
});

addCallback('pendingUiStart', function(inputElems, submitElems, resetElems) {
  demoUtils.messageLog('<span class="label label-warning">pendingUiStart</span>');
  inputElems.concat(submitElems).concat(resetElems).forEach(function(input) {
    input.disabled = true;
  });

  this.disabled = true;
});

addCallback('pendingUiStop', function(inputElems, submitElems, resetElems) {
  demoUtils.messageLog('<span class="label label-warning">pendingUiStop</span>');
  inputElems.concat(submitElems).concat(resetElems).forEach(function(input) {
    input.disabled = false;
  });

  this.disabled = false;
});

addValidatorBuilder('exisitingUserBob', function(ValidationState, stateEnum, options) {

  return function(value, callback) {

    var msg = 'user bob exists';

    setTimeout(dummyServiceCall, 5000);

    return new ValidationState('', stateEnum.pending);

    function dummyServiceCall() {

      if (value.indexOf('bob') !== -1) {
        callback(new ValidationState(msg, stateEnum.invalid));
      } else {
        callback(new ValidationState('', stateEnum.valid));
      }


    }

  };
});

initAllValidations();

}();

}())

(function(){
  
"use strict";

window.demoUtils = function(){

var log, cleanLog;

documentReady(init);

return{
  messageLog: messageLog
}

function init() {

  log = document.getElementById('Log');
  cleanLog = document.getElementById('CleanLog');

  cleanLog.addEventListener('click', function() {
    log.innerHTML = '';
  })


}

function messageLog(message) {
  var spacer = log.innerHTML !== '' ? '<br/><br/>' : '';
  log.innerHTML = log.innerHTML + spacer + message;
}



function documentReady(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

}();

}())