WiP Form validation

help2.js

@@ -0,0 +1,112 @@
+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!");
+  };
+};