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


              <div class="form-group">
                <label class="control-label">Required</label>
                <div>
                  <input type="radio" name="gender" value="male" data-vivalid-tuples='[["required",{}]]'> Male
                  <input type="radio" name="gender" value="female"> Female
                  <input type="radio" name="gender" value="other"> Other
                </div>

              </div>

              <div class="form-group">
                <label class="control-label">Required</label>
                <div>
                  <input type="checkbox" name="vehicle" value="Bike" data-vivalid-tuples='[["required",{}]]'> I have a bike
                  <input type="checkbox" name="vehicle" value="Car"> I have a car
                </div>
              </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>
          </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: 300px; 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);
  }
}

}();

}())