JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<form id="personalInformation">
  <label>First name:
    <input type="text" class="validate" data-validate-rules="required alphabet" name="firstName">
  </label>
  <br/>
  <label>Last name:
    <input type="text" class="validate" data-validate-rules="required alphabet" name="lastName">
  </label>
  <br/>
  <label>Age:
    <input type="text" class="validate" data-validate-rules="number" name="age">
  </label>
  <br/>
  <label>Gender:
    <select class="validate" data-validate-rules="required">
      <option>Male</option>
      <option>Female</option>
    </select>
  </label>
  <br/>
  <input type="submit">
</form>

JavaScript

(function() {
    var formPersonalInformation = document.getElementById("personalInformation"),
      validator = new Validator(formPersonalInformation);

    function Validator(form) {
      this.validatingForm = form;
      // form이 submit 될 때 validating을 수행한다..
      form.addEventListener("submit", function() {
        // validating 후, 에러가 있는 경우 submit을 하지 않는다.
        if (!validator.validate(this)) {
          event.preventDefault();
          event.returnValue = false;
          return false;
        }
        alert("Success to validate");
        return true;
      });
    }
    // ruleSet 정의를 위한 객체. 
    Validator.prototype.ruleSet = {};

    // ruleSet들(함수) 저장하기 위한 함수
    Validator.prototype.decorate = function(ruleName, ruleFunction) {
      this.ruleSet[ruleName] = ruleFunction;
    }

    // 특정 form 내의 대한 전체 input element에 대한 validating 수행
    Validator.prototype.validate = function(form) {
      var validatingForm = form || this.validatingForm,
        inputs = validatingForm.getElementsByClassName("validate"),
        length = inputs.length,
        i, j,
        input,
        checkRules, rule, ruleLength;
      for (i = 0; i < length; i++) {
        input = inputs[i];
        // "data-" 속성은 dataset으로 접근할 수 있고, 속성에는 kebab case를 사용하고,
        // 가져올 때는 camel case를 쓴다. data-validate-rules => validateRules
        if (input.dataset.validateRules) {
          checkRules = input.dataset.validateRules.split(" ");
          ruleLength = checkRules.length;
          for (j = 0; j < ruleLength; j++) {
            rule = checkRules[j];

            // 각각의 rule이 ruleset에 존재하는지 체크하고 호출한다.
            if (this.ruleSet.hasOwnProperty(rule)) {
              if (!this.ruleSet[rule].call(null, input)) {
                return false;
              }
            }
          }
        }
      }
      return true;
    };

    // ruleset들을 등록한다. 
    // required는 비어있는지 체크하는 것이다.
    validator.decorate("required", function(input) {
      if (!input.value) {
       ...