diff --git a/ignite-html-validate.js b/ignite-html-validate.js
new file mode 100644
index 0000000..3637207
--- /dev/null
+++ b/ignite-html-validate.js
@@ -0,0 +1,313 @@
+import { IgniteTemplate } from "../ignite-html/ignite-template.js";
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+
+/**
+ * Creates and shows a notification element on a target element.
+ * @param {HTMLElement} target Target element to show the notification on.
+ * @param {string} type Type of notification to show (Error|Warning|Success|Info)
+ * @param {string|Function|IgniteProperty} msg The message to show
+ * @param {Number} duration The number of miliseconds to show the notification for.
+ * @returns {HTMLElement} The created notification HTMLElement.
+ */
+function notify(target, type, msg, duration) {
+ var color = "";
+ if (type == "error") {
+ color = "#ff7979";
+ } else if (type == "warning") {
+ color = "#ffc107";
+ } else if (type == "info") {
+ color = "#2980b9";
+ } else if (type == "success") {
+ color = "#10c469";
+ }
+
+ if (target._validation && target._validation.isConnected) {
+ target._validation.remove();
+ }
+
+ var originalPosition = window.getComputedStyle(target.parentNode).position;
+ target.parentNode.style.setProperty("position", "relative");
+
+ var notification = document.createElement("div");
+ notification.classList.add("ignite-html-validate");
+ notification.classList.add(type);
+ notification.style.setProperty("left", "50%");
+ notification.style.setProperty("position", "absolute");
+ notification.style.setProperty("transform", "translate(-50%, 0)");
+ notification.style.setProperty("display", "flex");
+ notification.style.setProperty("align-items", "center");
+ notification.style.setProperty("flex-direction", "column");
+ notification.style.setProperty("z-index", 999999);
+ notification.style.setProperty("width", "100%");
+
+ var pointer = document.createElement("div");
+ pointer.classList.add("pointer");
+ pointer.style.setProperty("width", 0);
+ pointer.style.setProperty("height", 0);
+ pointer.style.setProperty("background-color", "transparent");
+ pointer.style.setProperty("border-left", "0.5em solid transparent");
+ pointer.style.setProperty("border-right", "0.5em solid transparent");
+ pointer.style.setProperty("border-bottom", `0.5em solid ${color}`);
+
+ var content = document.createElement("div");
+ content.classList.add("content");
+ content.style.setProperty("background-color", color);
+ content.style.setProperty("padding", "0.5em");
+ content.style.setProperty("border-radius", "0.5em");
+ content.style.setProperty("box-shadow", "0 2px 2px rgba(0,0,0,0.4)");
+ content.style.setProperty("color", "#fff");
+
+ if (msg instanceof Function) {
+ content.innerHTML = msg();
+ } else if (msg instanceof IgniteProperty) {
+ content.innerHTML = msg.value;
+ } else {
+ content.innerHTML = msg.toString();
+ }
+
+ notification.appendChild(pointer);
+ notification.appendChild(content);
+
+ if (target.nextSibling) {
+ target.parentNode.insertBefore(notification, target.nextSibling);
+ } else {
+ target.parentNode.appendChild(notification);
+ }
+
+ target._validation = notification;
+
+ if (duration != -1) {
+ setTimeout(() => {
+ if (notification && notification.isConnected) {
+ notification.remove();
+ target._validation = null;
+ }
+ target.parentNode.style.setProperty("position", originalPosition);
+ }, duration);
+ }
+
+ return notification;
+}
+
+/**
+ * Shows an error message on a given HTMLElement.
+ * @param {string|Function} msg The error message to show.
+ * @param {Number} duration The number of miliseconds to show the error. Default is 4000. -1 is infinite.
+ * @returns {HTMLElement} The created notification HTMLElement.
+ */
+HTMLElement.prototype.error = function (msg, duration = 4000) {
+ return notify(this, "error", msg, duration);
+}
+
+/**
+ * Shows a warning message on a given HTMLElement.
+ * @param {string|Function} msg The warning message to show.
+ * @param {Number} duration The number of miliseconds to show the warning. Default is 4000. -1 is infinite.
+ * @returns {HTMLElement} The created notification HTMLElement.
+ */
+HTMLElement.prototype.warning = function (msg, duration = 4000) {
+ return notify(this, "warning", msg, duration);
+}
+
+/**
+ * Shows a success message on a given HTMLElement.
+ * @param {string|Function} msg The success message to show.
+ * @param {Number} duration The number of miliseconds to show the notification. Default is 4000. -1 is infinite.
+ * @returns {HTMLElement} The created notification HTMLElement.
+ */
+HTMLElement.prototype.success = function (msg, duration = 4000) {
+ return notify(this, "success", msg, duration);
+}
+
+/**
+ * Shows a info message on a given HTMLElement.
+ * @param {string|Function} msg The info message to show.
+ * @param {Number} duration The number of miliseconds to show the notification. Default is 4000. -1 is infinite.
+ * @returns {HTMLElement} The created notification HTMLElement.
+ */
+HTMLElement.prototype.info = function (msg, duration = 4000) {
+ notify(this, "info", msg, duration);
+}
+
+/**
+ * Validates an input when changed.
+ * @param {Function|IgniteProperty} callback The callback function to invoke in order to validate changes to an input.
+ * @example
+ * .validate((value, error, warning, success, info) => {
+ * if (value == null) {
+ * error("Value cannot be null");
+ * }
+ * })
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validate = function (callback) {
+ //Setup the validators array if it doesn't exist.
+ if (!this._validators) {
+ this._validators = [];
+
+ //Setup an event for change to run the validators.
+ this.on("change", () => {
+ for (var i = 0; i < this._validators.length; i++) {
+ if (!this._validators[i]()) {
+ return false;
+ }
+ }
+ });
+
+ //Setup a constructor to create a validate function on the created element.
+ this._constructors.push(() => this.element.validate = () => {
+ for (var i = 0; i < this._validators.length; i++) {
+ if (!this._validators[i]()) {
+ return false;
+ }
+ }
+ return true;
+ });
+ }
+
+ //Register a new validator
+ this._validators.push(() => {
+ //If the element already has a validation element remove it.
+ if (this.element._validation && this.element._validation.isConnected) {
+ this.element._validation.remove();
+ this.element._validation = null;
+ }
+
+ //Get the target from the callback.
+ var target = callback;
+ if (target instanceof IgniteProperty) {
+ target = target.value;
+ }
+
+ //Run the target to see if we passed validation.
+ var error = false;
+ target(
+ this._elementValue,
+ (msg, duration = 4000) => { notify(this.element, "error", msg, duration); error = true; },
+ (msg, duration = 4000) => { notify(this.element, "warning", msg, duration); },
+ (msg, duration = 4000) => { notify(this.element, "success", msg, duration); },
+ (msg, duration = 4000) => { notify(this.element, "info", msg, duration); }
+ );
+
+ return !error;
+ });
+
+ return this;
+};
+
+/**
+ * Validates an input to make sure it contains a valid email address.
+ * @param {string|Function|IgniteProperty} msg The message to display when the email is incorrect. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validateEmail = function (msg) {
+ return this.validate((value, error) => {
+ if (!value || value.trim().length < 5) {
+ return error(msg ? msg : `Email address too short.`);
+ } else if (!value.includes('@')) {
+ return error(msg ? msg : 'Email address missing @ symbol.');
+ } else if (!value.includes('.')) {
+ return error(msg ? msg : 'Email address missing domain.');
+ } else if (value.length > 64) {
+ return error(msg ? msg : 'Email address too long.');
+ } else if (value.includes(' ')) {
+ return error(msg ? msg : 'Email address cannot contain spaces.');
+ }
+ });
+}
+
+/**
+ * Validates an input to make sure it contains a valid password.
+ * @param {string|Function|IgniteProperty} msg The message to display when the email is incorrect. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validatePassword = function (msg) {
+ return this.validate((value, error) => {
+ if (!value || value.trim().length < 5) {
+ return error(msg ? msg : `Password is too short.`);
+ } else if (value.includes(' ')) {
+ return error(msg ? msg : 'Password cannot contain spaces.');
+ } else if (value.length > 64) {
+ return error(msg ? msg : 'Password too long.');
+ }
+ });
+}
+
+/**
+ * Validates an input to make sure it contains a min number of characters.
+ * @param {Number} min The min number of characters the input can have.
+ * @param {string|Function|IgniteProperty} msg The message to display when the input length is too short. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validateMin = function (min, msg) {
+ return this.validate((value, error) => {
+ if (!value || value.toString().trim().length < min) {
+ return error(msg ? msg : `Input must contain at least ${min} character(s).`);
+ }
+ });
+}
+
+/**
+ * Validates an input to make sure it contains a min number of characters.
+ * @param {Number} max The max number of characters the input can have.
+ * @param {string|Function|IgniteProperty} msg The message to display when the input length is too long. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validateMax = function (max, msg) {
+ return this.validate((value, error) => {
+ if (!value || value.toString().trim().length > max) {
+ return error(msg ? msg : `Input must contain less than ${max} character(s).`);
+ }
+ });
+}
+
+/**
+ * Validates an input to make sure it includes a string.
+ * @param {string} str The string that the input must include.
+ * @param {string|Function|IgniteProperty} msg The message to display when the input doesn't contain the string. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validateIncludes = function (str, msg) {
+ return this.validate((value, error) => {
+ if (!value || !value.toString().includes(str)) {
+ return error(msg ? msg : `Input must contain ${str}.`);
+ }
+ });
+}
+
+/**
+ * Validates an input to make sure it matches a given value.
+ * @param {string|Function|IgniteProperty} compare The value to compare against the input.
+ * @param {string|Function|IgniteProperty} msg The message to display when the input doesn't match. If null a default one will show.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.validateMatches = function (compare, msg) {
+ return this.validate((value, error) => {
+ if (compare instanceof Function) {
+ if (compare() != value) {
+ return error(msg ? msg : `Input does not match: ${compare()}.`);
+ }
+ } else if (compare instanceof IgniteProperty) {
+ if (compare.value != value) {
+ return error(msg ? msg : `Input does not match: ${compare.value}.`);
+ }
+ } else if (value != compare) {
+ return error(msg ? msg : `Input does not match: ${str}.`);
+ }
+ });
+}
+
+/**
+ * Validates all the children of an element and returns if they are valid or not.
+ * @returns {Boolean} Whether or not all the children of this element are valid.
+ */
+HTMLElement.prototype.validateAll = function () {
+ var elements = this.getElementsByTagName("*");
+ for (var i = 0; i < elements.length; i++) {
+ if (elements[i].validate != undefined && !elements[i].validate()) {
+ return false;
+ }
+ }
+ return true;
+}
\ No newline at end of file