113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
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!");
|
|
};
|
|
};
|