<!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-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: 530px; overflow: auto;">

              <div class="form-group">
                <label class="control-label">required , minlength = 4 , maxlength = 6</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}],["minlength",{"min": 4}],["maxlength",{"max": 6}]]' placeholder="try 'Hello'" />
              </div>
              
              <div class="form-group">
                <label class="control-label">required with custom message</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{"msg" : "this is a custom required message"}]]' placeholder="" />
              </div>
            
               <div class="form-group">
                <label class="control-label">required , betweenlength = (4,22) , <u>url</u></label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}],["betweenlength",{"min": 4, "max": 22}],["url",{}]]' placeholder="try 'http://www.google.com'" />
              </div>
              
              <div class="form-group">
                <label class="control-label">required , email</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}],["email",{}]]' placeholder="try an email address" />
              </div>
              
              <div class="form-group">
                <label class="control-label">required , regex pattern</label>
                <input type="text" class="form-control" data-vivalid-tuples='[["required",{}],["pattern",{"regex": "[0-9]"}]]' placeholder="try any pattern with a digit" />
              </div>
              
              <input type="button" class="btn btn-primary" data-vivalid-submit="" value="send"  />
              <input type="button" class="btn btn-primary" data-vivalid-reset="" value="reset validation"  />
              

            </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: 530px; 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 )');
});

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);
  }
}

}();

}())