Tiny Validate

by Sam Fereday

HTML

<form class="form-style-4 validate-form">
  <label for="field1">
    <span>Enter Your Name</span>
    <input type="text" name="field1" data-rules="required, textonly" />
  </label>
  <label for="field2">
    <span>Email Address</span>
    <input type="email" name="field2" data-rules="required, email, text" />
  </label>
  <label for="field4">
    <span>Short Subject</span>
    <input type="text" name="field4" data-rules="number" />
  </label>
  <label for="field5">
    <span>Message to Us</span>
    <textarea name="field5" onkeyup="adjust_textarea(this)"></textarea>
  </label>
  <label>
    <span>&nbsp;</span>
    <input type="submit" value="Send Letter" />
  </label>
</form>

CSS

.form-style-4 {
  width: 450px;
  font-size: 16px;
  background: #495C70;
  padding: 30px 30px 15px 30px;
  border: 5px solid #53687E;
}

.form-style-4 input[type=submit],
.form-style-4 input[type=button],
.form-style-4 input[type=text],
.form-style-4 input[type=email],
.form-style-4 textarea,
.form-style-4 label {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  color: #fff;
}

.form-style-4 label {
  display: block;
  margin-bottom: 10px;
}

.form-style-4 label > span {
  display: inline-block;
  float: left;
  width: 150px;
}

.form-style-4 input[type=text],
.form-style-4 input[type=email] {
  background: transparent;
  border: none;
  border-bottom: 1px dashed #83A4C5;
  width: 275px;
  outline: none;
  padding: 0px 0px 0px 0px;
  font-style: italic;
}

.form-style-4 textarea {
  font-style: italic;
  padding: 0px 0px 0px 0px;
  background: transparent;
  outline: none;
  border: none;
  border-bottom: 1px dashed #83A4C5;
  width: 275px;
  overflow: hidden;
  resize: none;
  height: 20px;
}

.form-style-4 textarea:focus,
.form-style-4 input[type=text]:focus,
.form-style-4 input[type=email]:focus,
.form-style-4 input[type=email]:focus {
  border-bottom: 1px dashed #D9FFA9;
}

.form-style-4 input[type=submit],
.form-style-4 input[type=button] {
  background: #576E86;
  border: none;
  padding: 8px 10px 8px 10px;
  border-radius: 5px;
  color: #A8BACE;
}

.form-style-4 input[type=submit]:hover,
.form-style-4 input[type=button]:hover {
  background: #394D61;
}

.invalid {
  border-color: red!important;
}

JavaScript

console.clear();

//
var RuleRunner = {

  rules: {

    required: function(val) {
      return val.length > 0;
    },

    isText: function(val) {
      return typeof val === 'string';
    },

    isNum: function(val) {
      return typeof val === 'number';
    },

    isEmail: function(val) {
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(val);
    },

    min: function(val, n) {
      return val > n;
    },

    max: function(val, n) {
      return val < n;
    }

  },

  check: function(nodes) {

    var self = this;

    return !nodes.some(function(el) {

      return !el.getAttribute('data-rules').split(',').some(function(t) {

        let isValid = false;

        switch (t) {
          case 'required':
            isValid = self.rules.required(el.value);
            break;
          case 'email':
            isValid = self.rules.isEmail(el.value);
            break;
          case 'text':
            isValid = self.rules.isText(el.value);
            break;
          case 'number':
            isValid = self.rules.isNum(el.value);
            break;
        }

        if (el.className.indexOf('invalid') > -1)
          el.className = el.className.replace('invalid', '');

        el.className = isValid ? el.className : el.className + ' invalid';

        console.log(el.className)

        return isValid;

      });

    });

  }

};

var TVForm = function(form) {

  this.formElement = form;
  this.candidates = this.make(form.getElementsByTagName('input'));

  return this;

};

TVForm.prototype.make = function(nodes) {

  var attr = '',
    made = [],
    currentNode;

  for (var i = 0; i < nodes.length; i++) {

    currentNode = nodes[i];
    attr = currentNode.getAttribute('data-rules');

    if (attr && attr.length > 0)
      made.push(currentNode);

  }

  return made;

};

var TinyValidate = function(form)...