deepak · September 14, 2016 06:11
diff --git a/validaitions-demo.html b/validaitions-demo.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <!-- These meta tags come first. -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React Validation Demo</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <style>
      #board {
        font-family: Consolas, Courier, monospace;
        border: 1px solid #eee;
        color: #333;
        background: rgb(250, 250, 250);
        font-size: 1em;
        overflow: auto;
        box-sizing: border-box;
      }

      #validation {
 			  border: 1px solid;
 			  margin: 10px 0px;
 			  padding: 15px 10px 15px 50px;
 			  background-repeat: no-repeat;
 			  background-position: 10px center;
        color: #D63301;
 			  background-color: #FFCCBA;
 		  }
    </style>
  </head>
  <body>
    <div class="app" id="app">
      <div id="validation" class="hidden">
      </div>
      <form id="contact" class="pure-form pure-form-aligned"
        method="post"
        action="http://mockbin.org/bin/64082569-e76a-4f2d-8672-6b1f98d1176f">
        <fieldset>
          <legend>
            Contact your Tax Advisor
          </legend>

          <div class="pure-control-group">
            <label for="name">Name:</label>
            <input type="text" required id="name" name="name" class="input pure-input-2-3" placeholder="Please enter your name">
          </div>

          <div class="pure-control-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" class="input pure-input-2-3" placeholder="Please enter your email">
          </div>

          <div class="pure-control-group">
            <label for="pan">PAN:</label>
            <input type="text" id="pan" name="pan" class="input" placeholder="Please enter your PAN number">
          </div>

          <div class="pure-control-group">
            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="tel" class="input" placeholder="Please enter your phone">
          </div>

          <div class="pure-controls">
            <button class="pure-button pure-button-primary">Contact</button>
          </div>
        </fieldset>
      </form>

      <div id="board">
        <span>
          <button id="clearMonitor" class="pure-button">Clear</button>
        </span>

        <div id="domBoard">
        </div>
      </div>
    </div>

    <script>
      const App = {
        domBoard: document.getElementById('domBoard'),
        form: document.getElementById('contact'),
        clearMonitor: document.getElementById('clearMonitor'),
        validation: document.getElementById('validation'),

        setupOnSubmit: function setupOnSubmit() {
          const that = this;
          this.form.addEventListener('submit', this._onSubmit.bind(this));
        },

        setupMonitorControls: function () {
          this.clearMonitor.addEventListener('click', this._clearMonitor.bind(this));
        },

        _onSubmit: function _onSubmit(event) {
          event.preventDefault();

          if (this.form.checkValidity()) {
            const data = this._serializeForm();
            console.log("serialized form data is" , data);
          } else {
            validation.innerHTML = this._validationMessages().map(function(msg) {
              return ("<p>" + msg + "</p>");
            });
            this._removeClass(validation, 'hidden');
          }
        },

        _validationMessages: function _validationMessages() {
          var messages = [];
          var invalidInputs = this.form.querySelectorAll("input:invalid");
          for (i = 0, len = invalidInputs.length; i < len; i++) {
            var node = invalidInputs[i];
            var label = node.parentNode.querySelectorAll('label')[0].innerHTML
            messages.push(label + node.validationMessage);
          }
          return messages;
        },

        _serializeForm: function _serializeForm() {
          const name = this._getFormValue('name');
          const email = this._getFormValue('email');
          const pan = this._getFormValue('pan');
          const phone = this._getFormValue('phone');

          return {
            name: name,
            email: email,
            pan: pan,
            phone: phone
          };
        },

        _getFormValue: function _getFormValue(fieldId) {
          return document.getElementById(fieldId).value;
        },

        monitorEvents: function monitorEvents() {
          const elements = document.querySelectorAll('input');
          const events = 'change input blur focus invalid'.split(' ');
          const that = this;

          for (var x = 0, xLen = elements.length; x < xLen; x++) {
            var ele = elements[x];

            for (var y = 0, yLen = events.length; y < yLen; y++) {
              var eventName = events[y];
              const eventListener = that._logEvent.bind(that)
              ele.addEventListener(eventName, eventListener);
            }
          }

          this.form.addEventListener('submit', that._logEvent.bind(that));
        },

        _clearMonitor: function _clearMonitor() {
          this.domBoard.innerHTML = "";
        },

        _logEvent: function _logEvent(event) {
          console.dir(event);

          const eventType = event.type;
          const target = event.target;
          var logEntry = "<p>" + eventType + " event on " + target.localName + "#" + target.id;
          if (eventType !== 'submit') {
            logEntry += " with value " + target.value;
          }
          const entry = "<p>" + logEntry + "</p";

          this.domBoard.insertAdjacentHTML('afterbegin', entry);
        },

        _removeClass: function _removeClass(ele, className) {
          if (ele.classList) {
            ele.classList.remove(className);
          } else {
            ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
          }
        },

        _addClass: function _removeClass(ele, className) {
          if (ele.classList) {
            ele.classList.add(className);
          } {
            ele.className += ' ' + className;
          }
        }
      };

      // App.setupOnSubmit();
      App.setupMonitorControls();
      App.monitorEvents();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- These meta tags come first. -->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>React Validation Demo</title>

	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	<style>
	#board {
	font-family: Consolas, Courier, monospace;
	border: 1px solid #eee;
	color: #333;
	background: rgb(250, 250, 250);
	font-size: 1em;
	overflow: auto;
	box-sizing: border-box;
	}

	#validation {
	border: 1px solid;
	margin: 10px 0px;
	padding: 15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	color: #D63301;
	background-color: #FFCCBA;
	}
	</style>
	</head>
	<body>
	<div class="app" id="app">
	<div id="validation" class="hidden">
	</div>
	<form id="contact" class="pure-form pure-form-aligned"
	method="post"
	action="http://mockbin.org/bin/64082569-e76a-4f2d-8672-6b1f98d1176f">
	<fieldset>
	<legend>
	Contact your Tax Advisor
	</legend>

	<div class="pure-control-group">
	<label for="name">Name:</label>
	<input type="text" required id="name" name="name" class="input pure-input-2-3" placeholder="Please enter your name">
	</div>

	<div class="pure-control-group">
	<label for="email">Email:</label>
	<input type="email" id="email" name="email" class="input pure-input-2-3" placeholder="Please enter your email">
	</div>

	<div class="pure-control-group">
	<label for="pan">PAN:</label>
	<input type="text" id="pan" name="pan" class="input" placeholder="Please enter your PAN number">
	</div>

	<div class="pure-control-group">
	<label for="phone">Phone:</label>
	<input type="tel" id="phone" name="tel" class="input" placeholder="Please enter your phone">
	</div>

	<div class="pure-controls">
	<button class="pure-button pure-button-primary">Contact</button>
	</div>
	</fieldset>
	</form>

	<div id="board">
	<span>
	<button id="clearMonitor" class="pure-button">Clear</button>
	</span>

	<div id="domBoard">
	</div>
	</div>
	</div>

	<script>
	const App = {
	domBoard: document.getElementById('domBoard'),
	form: document.getElementById('contact'),
	clearMonitor: document.getElementById('clearMonitor'),
	validation: document.getElementById('validation'),

	setupOnSubmit: function setupOnSubmit() {
	const that = this;
	this.form.addEventListener('submit', this._onSubmit.bind(this));
	},

	setupMonitorControls: function () {
	this.clearMonitor.addEventListener('click', this._clearMonitor.bind(this));
	},

	_onSubmit: function _onSubmit(event) {
	event.preventDefault();

	if (this.form.checkValidity()) {
	const data = this._serializeForm();
	console.log("serialized form data is" , data);
	} else {
	validation.innerHTML = this._validationMessages().map(function(msg) {
	return ("<p>" + msg + "</p>");
	});
	this._removeClass(validation, 'hidden');
	}
	},

	_validationMessages: function _validationMessages() {
	var messages = [];
	var invalidInputs = this.form.querySelectorAll("input:invalid");
	for (i = 0, len = invalidInputs.length; i < len; i++) {
	var node = invalidInputs[i];
	var label = node.parentNode.querySelectorAll('label')[0].innerHTML
	messages.push(label + node.validationMessage);
	}
	return messages;
	},

	_serializeForm: function _serializeForm() {
	const name = this._getFormValue('name');
	const email = this._getFormValue('email');
	const pan = this._getFormValue('pan');
	const phone = this._getFormValue('phone');

	return {
	name: name,
	email: email,
	pan: pan,
	phone: phone
	};
	},

	_getFormValue: function _getFormValue(fieldId) {
	return document.getElementById(fieldId).value;
	},

	monitorEvents: function monitorEvents() {
	const elements = document.querySelectorAll('input');
	const events = 'change input blur focus invalid'.split(' ');
	const that = this;

	for (var x = 0, xLen = elements.length; x < xLen; x++) {
	var ele = elements[x];

	for (var y = 0, yLen = events.length; y < yLen; y++) {
	var eventName = events[y];
	const eventListener = that._logEvent.bind(that)
	ele.addEventListener(eventName, eventListener);
	}
	}

	this.form.addEventListener('submit', that._logEvent.bind(that));
	},

	_clearMonitor: function _clearMonitor() {
	this.domBoard.innerHTML = "";
	},

	_logEvent: function _logEvent(event) {
	console.dir(event);

	const eventType = event.type;
	const target = event.target;
	var logEntry = "<p>" + eventType + " event on " + target.localName + "#" + target.id;
	if (eventType !== 'submit') {
	logEntry += " with value " + target.value;
	}
	const entry = "<p>" + logEntry + "</p";

	this.domBoard.insertAdjacentHTML('afterbegin', entry);
	},

	_removeClass: function _removeClass(ele, className) {
	if (ele.classList) {
	ele.classList.remove(className);
	} else {
	ele.className = ele.className.replace(new RegExp('(^\|\\b)' + className.split(' ').join('\|') + '(\\b\|$)', 'gi'), ' ');
	}
	},

	_addClass: function _removeClass(ele, className) {
	if (ele.classList) {
	ele.classList.add(className);
	} {
	ele.className += ' ' + className;
	}
	}
	};

	// App.setupOnSubmit();
	App.setupMonitorControls();
	App.monitorEvents();
	</script>
	</body>
	</html>