ivanbanov/FormValidator.html

## FormValidator.html
<!-- *** Simples POC of FormValidator *** -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Validator</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      font: 14px Helvetica, Arial;
    }

    form { margin: 50px; }

    label {
      width: 60px;
      display: inline-block;
      margin-right: 10px;
    }

    input { padding: 5px; }
    input.error { border: 1px solid red; }

    button {
      border: none;
      background: #ccc;
      padding: 10px;
      cursor: pointer;
    }

    button:hover { background: #aaa; }
  </style>

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

  <script>
    // i18n
    window.booking = {
      i18n: {
        required: 'This field is required',
        email: 'Invalid email',
        size: {
          min: 'Wrong min size',
          max: 'Wrong max size',
        },
      },
    };

    // Validations
    (function() {
      function validation(type, value, options, callback) {
        var result = validation[type](value, options);
        (callback || $.noop)(result);

        return result;
      }


      validation.email = function(value) {
        var regExp = /.+@.+\.com$/;

        if (!regExp.test(value)) {
          return window.booking.i18n.email;
        }
      }

      validation.size = function(value, options) {
        if (value.length > options.max) {
          return window.booking.i18n.size.max;
        }

        if (value.length < options.min) {
          return window.booking.i18n.size.min;
        }
      }

      validation.required = function(value) {
        if (!value.trim()) {
          return window.booking.i18n.required;
        }
      }

      window.booking.validation = validation;
    })();

    // Validatior
    (function() {
      function Validator(rules) {
        this.rules = rules;
      }

      Validator.prototype = {
        validate: function(value) {
          this.errors = [];

          var self = this;

          this.rules.forEach(function(rule) {
            var error = window.booking.validation(
              rule.type,
              value,
              rule.options,
              rule.callback
            );

            if (error) {
              self.errors.push(error);
            }
          });

          return this.errors;
        },

        errors: [],
      };

      window.booking.Validator = Validator;
    })();

    // Form Validator
    (function() {
      var defaults = {
        errorClass: 'error',
      };

      function FormValidator(form, config) {
        this.$form = $(form);
        this.options = $.extend({}, defaults, config);
        this.init();
      }

      FormValidator.prototype = {
        init() {
          this._bindValidations();
          this._bindForm();
        },

        _bindValidations: function() {
          var self = this;

          this.options.fields.forEach(function(field) {
            var $inputElement = self.$form.find(field.selector);

            $inputElement.data('validator', new window.booking.Validator(field.rules));

            $inputElement
              .on('input', function() {
                $inputElement.removeClass(self.options.errorClass);
                $inputElement.next('.errors').remove();
              })
              .on('blur', function() {
                var errors = $inputElement.data('validator').validate(this.value);

                if (errors.length) {
                  $inputElement.next('.errors').remove();
                  $inputElement.addClass(self.options.errorClass);

                  var $divErrors = $('<ul class="errors" />');

                  $divErrors.insertAfter($inputElement);

                  errors.forEach(function(error) {
                    $divErrors.append('<li>' + error + '</li>');
                  });
                }
              });
          });
        },

        _bindForm: function() {
          var self = this;

          this.$form.on('submit', function(event) {
            event.preventDefault();
            var $this = $(this);

            if (self.$form.find('.error').length) {
              $this.addClass(self.options.errorClass);
              alert('Fail! Check all fields')
            } else {
              $this.removeClass(self.options.errorClass)
              alert('Success! Form sent');
            }
          });
        },
      }

      window.booking.FormValidator = FormValidator;
    })();

    // App
    $(function() {
      new booking.FormValidator('#form', {
        fields: [
          {
            selector: '[name=user]',
            rules: [
              { type: 'required', },
              {
                type: 'size',
                options: {
                  min: 3,
                  max: 10,
                }
              },
            ],
          },
          {
            selector: '[name=email]',
            rules: [
              { type: 'required', },
              { type: 'email', },
            ],
          },
          {
            selector: '[name=password]',
            rules: [
              { type: 'required', },
              {
                type: 'size',
                options: {
                  min: 8,
                }
              },
            ],
          },
        ],
      });
    });
  </script>
</head>
<body>
  <form id="form">
    <label>User</label>
    <input type="text" name="user">
    <br><br>

    <label>Email</label>
    <input type="text" name="email">
    <br><br>

    <label>Password</label>
    <input type="text" name="password">
    <br><br>

    <button type="submit">Submit</button>
  </form>
</body>
</html>
	<!-- * Simples POC of FormValidator * -->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Validator</title>

	<style>
	* {
	margin: 0;
	padding: 0;
	font: 14px Helvetica, Arial;
	}

	form { margin: 50px; }

	label {
	width: 60px;
	display: inline-block;
	margin-right: 10px;
	}

	input { padding: 5px; }
	input.error { border: 1px solid red; }

	button {
	border: none;
	background: #ccc;
	padding: 10px;
	cursor: pointer;
	}

	button:hover { background: #aaa; }
	</style>

	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

	<script>
	// i18n
	window.booking = {
	i18n: {
	required: 'This field is required',
	email: 'Invalid email',
	size: {
	min: 'Wrong min size',
	max: 'Wrong max size',
	},
	},
	};

	// Validations
	(function() {
	function validation(type, value, options, callback) {
	var result = validation[type](value, options);
	(callback \|\| $.noop)(result);

	return result;
	}


	validation.email = function(value) {
	var regExp = /.+@.+\.com$/;

	if (!regExp.test(value)) {
	return window.booking.i18n.email;
	}
	}

	validation.size = function(value, options) {
	if (value.length > options.max) {
	return window.booking.i18n.size.max;
	}

	if (value.length < options.min) {
	return window.booking.i18n.size.min;
	}
	}

	validation.required = function(value) {
	if (!value.trim()) {
	return window.booking.i18n.required;
	}
	}

	window.booking.validation = validation;
	})();

	// Validatior
	(function() {
	function Validator(rules) {
	this.rules = rules;
	}

	Validator.prototype = {
	validate: function(value) {
	this.errors = [];

	var self = this;

	this.rules.forEach(function(rule) {
	var error = window.booking.validation(
	rule.type,
	value,
	rule.options,
	rule.callback
	);

	if (error) {
	self.errors.push(error);
	}
	});

	return this.errors;
	},

	errors: [],
	};

	window.booking.Validator = Validator;
	})();

	// Form Validator
	(function() {
	var defaults = {
	errorClass: 'error',
	};

	function FormValidator(form, config) {
	this.$form = $(form);
	this.options = $.extend({}, defaults, config);
	this.init();
	}

	FormValidator.prototype = {
	init() {
	this._bindValidations();
	this._bindForm();
	},

	_bindValidations: function() {
	var self = this;

	this.options.fields.forEach(function(field) {
	var $inputElement = self.$form.find(field.selector);

	$inputElement.data('validator', new window.booking.Validator(field.rules));

	$inputElement
	.on('input', function() {
	$inputElement.removeClass(self.options.errorClass);
	$inputElement.next('.errors').remove();
	})
	.on('blur', function() {
	var errors = $inputElement.data('validator').validate(this.value);

	if (errors.length) {
	$inputElement.next('.errors').remove();
	$inputElement.addClass(self.options.errorClass);

	var $divErrors = $('<ul class="errors" />');

	$divErrors.insertAfter($inputElement);

	errors.forEach(function(error) {
	$divErrors.append('<li>' + error + '</li>');
	});
	}
	});
	});
	},

	_bindForm: function() {
	var self = this;

	this.$form.on('submit', function(event) {
	event.preventDefault();
	var $this = $(this);

	if (self.$form.find('.error').length) {
	$this.addClass(self.options.errorClass);
	alert('Fail! Check all fields')
	} else {
	$this.removeClass(self.options.errorClass)
	alert('Success! Form sent');
	}
	});
	},
	}

	window.booking.FormValidator = FormValidator;
	})();

	// App
	$(function() {
	new booking.FormValidator('#form', {
	fields: [
	{
	selector: '[name=user]',
	rules: [
	{ type: 'required', },
	{
	type: 'size',
	options: {
	min: 3,
	max: 10,
	}
	},
	],
	},
	{
	selector: '[name=email]',
	rules: [
	{ type: 'required', },
	{ type: 'email', },
	],
	},
	{
	selector: '[name=password]',
	rules: [
	{ type: 'required', },
	{
	type: 'size',
	options: {
	min: 8,
	}
	},
	],
	},
	],
	});
	});
	</script>
	</head>
	<body>
	<form id="form">
	<label>User</label>
	<input type="text" name="user">
	<br><br>

	<label>Email</label>
	<input type="text" name="email">
	<br><br>

	<label>Password</label>
	<input type="text" name="password">
	<br><br>

	<button type="submit">Submit</button>
	</form>
	</body>
	</html>