javascriptvalidator.js

Posting a form after validation


I am using validator.js for form validation and MDN package for styling my form. I am using this form in a web app made using node js and express. I don't know how to redirect my form to app.post('/example) after its validation. Validation is working fine but just I am unable to find a way to render it to app.post('/example).

$(document).ready(function() {
  $('.mdb-select').materialSelect();
});

(function() {
  validate.extend(validate.validators.datetime, {
    parse: function(value, options) {
      return +moment.utc(value);
    },
    format: function(value, options) {
      var format = options.dateOnly ? "YYYY-MM-DD" : "YYYY-MM-DD hh:mm:ss";
      return moment.utc(value).format(format);
    }
  });

  var constraints = {
    email: {
      presence: true,
      email: true
    },
    password: {
      presence: true,
      length: {
        minimum: 5
      }
    },
    "confirm-password": {
      presence: true,
      equality: {
        attribute: "password",
        message: "^The passwords does not match"
      }
    },
    username: {
      presence: true,
      length: {
        minimum: 3,
        maximum: 20
      },
      format: {
        pattern: "[a-z0-9]+",
        flags: "i",
        message: "can only contain a-z and 0-9"
      }
    },
    birthdate: {
      presence: true,
      date: {
        latest: moment().subtract(18, "years"),
        message: "^You must be at least 18 years old to use this service"
      }
    },
    country: {
      presence: true,
      inclusion: {
        within: ["SE"],
        message: "^Sorry, this service is for Sweden only"
      }
    },
    zip: {
      format: {
        pattern: "\\d{5}"
      }
    },
    "number-of-children": {
      presence: true,
      numericality: {
        onlyInteger: true,
        greaterThanOrEqualTo: 0
      }
    }
  };

  var form = document.querySelector("form#main");
  form.addEventListener("submit", function(ev) {
    ev.preventDefault();
    handleFormSubmit(form);
  });

  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])
    });
  }

  function handleFormSubmit(form, input) {
    var errors = validate(form, constraints);
    showErrors(form, errors || {});
    if (!errors) {
      showSuccess();
    }
  }

  function showErrors(form, errors) {
    _.each(form.querySelectorAll("input[name], select[name]"), function(input) {
      showErrorsForInput(input, errors && errors[input.name]);
    });
  }

  function showErrorsForInput(input, errors) {
    var formGroup = closestParent(input.parentNode, "form-group"),
      messages = formGroup.querySelector(".messages");
    resetFormGroup(formGroup);
    if (errors) {
      formGroup.classList.add("has-error");
      _.each(errors, function(error) {
        addError(messages, error);
      });
    } else {
      formGroup.classList.add("has-success");
    }
  }

  function closestParent(child, className) {
    if (!child || child == document) {
      return null;
    }
    if (child.classList.contains(className)) {
      return child;
    } else {
      return closestParent(child.parentNode, className);
    }
  }

  function resetFormGroup(formGroup) {
    formGroup.classList.remove("has-error");
    formGroup.classList.remove("has-success");
    _.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
      el.parentNode.removeChild(el);
    });
  }

  function addError(messages, error) {
    var block = document.createElement("p");
    block.classList.add("help-block");
    block.classList.add("error");
    block.classList.add("text-danger");
    block.innerText = error;
    messages.appendChild(block);
  }

  function showSuccess() {
    alert("success");
  }
})();

Solution

  • Try this - assuming validate(form, constraints); returns TRUE when errors. I would not expect that, so perhaps you need to reverse your tests anyway.

    form.addEventListener("submit", function(ev) {
      if (!handleFormSubmit(form))  ev.preventDefault();
    });
    

    and

    function handleFormSubmit(form, input) {
      var errors = validate(form, constraints);
      showErrors(form, errors || {});
      if (!errors) {
        showSuccess();
      }
      return !errors;
    }