How can I validate a form?

[QJan84]

Hi!

I would like to know what a concept for validating simple and complex forms could look like?

• How can I validate a form? Use constraint validation?
• How can I create custom validations? An example would be the activation of an input if another input was filled in.
• How are error messages displayed?

I have a example form: codepen

My JS:

function component () {
	return {
		callbackModal: false,
		status: false,
		submitForm() {
			// Disable default HTML5 Validation
			this.$refs.form.setAttribute("novalidate", true);

			// Question:
			// How to validate a form on input and submit with constaints?

			// The form should only be sent when all fields are valid

			fetch('/php/ajax/send_callback.php', {
				method: 'POST',
				body: new FormData(this.$refs.form)
			})
			.then(response => response.ok && response.json()).then(data => {
				console.log("send_callback.php sollte success oder error liefern");
				console.log(data.status);
				this.status = data.status
			});
		}
	}
}

[ryangjchandler]

Hi @QJan84, Alpine doesn't actually provide any utilities for form validation out of the box. You'd be better off using an existing package, such as Iodine.

If you didn't want to use a package, you could use the checkValidity() method on each input element to see if they are valid or not.

A couple of pointers though:

1. To easily access your form data inside of the submitForm function, use x-model to hook each input up to a property on your object.

2. When you're submitting a form, you can return false from the event handler which will stop the event.

[QJan84]

Thank you for your answer. I already have my own script for validation but I wonder how I can connect it to alpine.js.

My validation script:

import * as formutil from "./_functions";

const FormValidation = (() => {
	const handleBlur = e => {
		// The click on the Submit button is also a blur event,
		// which should not be executed then.
		// The form fields would then be validated twice.
		if (e.target.type && e.target.type !== "submit") {
			const { target } = e;
			const parentForm = target.form;
			// First, let's see if the input contains an error
			const error = formutil.hasError(target);
			// If there's an error, show it
			if (error) {
				formutil.showError(target, error);
				parentForm.classList.add("is--error");
				parentForm.classList.remove("is--valid");
				return;
			}
			parentForm.classList.add("is--valid");
			parentForm.classList.remove("is--error");

			// Otherwise, remove any existing error message
			formutil.removeError(target);
		}
	};

	const handleSubmit = e => {
		let error;
		let hasErrors;
		const fields = e.target.elements;
		// Validate every form element
		Array.from(fields).forEach(field => {
			error = formutil.hasError(field);
			if (error) {
				formutil.showError(field, error);
				if (!hasErrors) {
					hasErrors = field;
				}
			}
		});

		if (hasErrors) {
			e.preventDefault(); // This disables the submit ????
			hasErrors.focus();
			e.target.classList.add("is--error");
			console.log('has errors');
		} else {
			e.target.classList.remove("is--error");
			console.log('is valid');

			// FORM IS VALID- SUBMIT !!!
		}
	};

	const bindEvents = form => {
		form.addEventListener("submit", handleSubmit, false);
		form.addEventListener("input", handleBlur, true);
	};

	const init = () => {
		const forms = document.querySelectorAll('[data-trigger="validate"]');
		forms.forEach(form => {
			// Deactivate HTML5 validation
			form.setAttribute("novalidate", true);
			// Set blur and input events
			bindEvents(form);
		});
	};

	return {
		init
	};
})();

// Init Validation
FormValidation.init();

I tried to connect it to alpine.js like this but it doesn't work.

function component () {
	return {
		callbackModal: false,
		status: false,
		submitForm() {
			// Disable default HTML5 Validation
			this.$refs.form.setAttribute("novalidate", true);
			
			// This throws an error
			// Uncaught ReferenceError: handleSubmit is not defined
			// I think my script "FormValidation" should be loaded BEFORE alpine.js?
			this.$refs.form.addEventListener("submit", handleSubmit, false);
			this.$refs.form.addEventListener("input", handleBlur, true);

			// How can I run fetch if everything is valid?

			fetch('/php/ajax/send_callback.php', {
				method: 'POST',
				body: new FormData(this.$refs.form)
			})
			.then(response => response.ok && response.json()).then(data => {
				console.log("send_callback.php sollte success oder error liefern");
				console.log(data.status);
				this.status = data.status
			});
		}
	}
}