old-web/help2.js

const validatorFunction = () => {
  // These are the constraints used to validate the form --just email for now!
  const constraints = {
    email: {
      email: {
        message: "Proba"
      },
      // Email is required
      presence: true,
      // and must be an email (duh)
      email: true
    }
  };

  // Hook up the inputs to validate on the fly
  const inputs = document.querySelectorAll("#email");
  // inputs.on("change", ev => {
  //     const errors = validate(form, constraints) || {};
  //     showErrorsForInput(this, errors[this.name]);
  //   });
  // var inputs = document.querySelectorAll("input, textarea, select");
  for (var i = 0; i < inputs.length; ++i) {
    inputs.item(i).addEventListener("change", function(ev) {
      var errors = validate(form, constraints) || {};
      showErrorsForInput(this, errors[this.name]);
    });
  }

  const handleFormSubmit = (form, input) => {
    // validate the form against the constraints
    const errors = validate(form, constraints);
    //
    console.log("handleFormSubmit error:", errors);
    // then we update the form to reflect the results
    showErrors(form, errors || {});
    if (!errors) {
      showSuccess();
    }
  };

  // Updates the inputs with the validation errors
  const showErrors = (form, errors) => {
    // We loop through all the inputs and show the errors for that input
    $.each(form.querySelectorAll("input[name], select[name]"), input => {
      // Since the errors can be null if no errors were found we need to handle
      // that
      showErrorsForInput(input, errors && errors[input.name]);
    });
    //showErrorsForInput(email, errors && errors[email]);
  };

  // Shows the errors for a specific input
  const showErrorsForInput = (input, errors) => {
    // This is the root of the input
    const formGroup = closestParent(input.parentNode, "form-group"),
      // Find where the error messages will be insert into
      messages = formGroup.querySelector(".messages");
    // First we remove any old messages and resets the classes
    resetFormGroup(formGroup);
    // If we have errors
    if (errors) {
      //
      console.log("errors:", errors);
      // we first mark the group has having errors
      formGroup.classList.add("has-error");
      // then we append all the errors
      $.each(errors, error => {
        addError(messages, errors[error]);
      });
    } else {
      // otherwise we simply mark it as success
      formGroup.classList.add("has-success");
    }
  };

  // Recusively finds the closest parent that has the specified class
  const closestParent = (child, className) => {
    if (!child || child == document) {
      return null;
    }
    if (child.classList.contains(className)) {
      return child;
    } else {
      return closestParent(child.parentNode, className);
    }
  };

  const resetFormGroup = formGroup => {
    // Remove the success and error classes
    formGroup.classList.remove("has-error");
    formGroup.classList.remove("has-success");
    // and remove any old messages
    $.each(formGroup.querySelectorAll(".help-block.error"), el => {
      el.parentNode.removeChild(el);
    });
  };

  // Adds the specified error with the following markup
  // <p class="help-block error">[message]</p>
  const addError = (messages, error) => {
    const block = document.createElement("p");
    block.classList.add("help-block");
    block.classList.add("error");
    block.innerText = error;
    messages.appendChild(block);
  };

  const showSuccess = () => {
    // We made it \:D/
    alert("Success!");
  };
};