vanilla-validation
Version:
Vanilla JavaScript validation rules
323 lines (267 loc) • 13 kB
JavaScript
// variables for inputs, buttons, select input etc
var inputs = document.querySelectorAll("*[data-validation]");
var otherInputs = document.querySelectorAll("input[type='hidden'], select[data-validation]");
var buttons = document.querySelectorAll("input[type='radio'], input[type='checkbox']");
var dateInputs = document.querySelectorAll(".date-input input");
var currencyInputs = document.querySelectorAll("input.currency");
var employmentStatus = document.getElementById("employmentStat");
var accordionSpeed = 0;
var mobileInputs = document.getElementsByClassName('telephone');
// ON BLUR, CLICK, FOCUS, KEYDOWN, KEYUP EVENTS
// on click remove validation classes from fieldset buttons
function validationButtons(buttons){
Array.prototype.forEach.call(buttons, function (el, index, array) {
el.addEventListener("click", function () {
var siblings = getSiblings(el, "input")
// if element is checked
if (el.checked)
modifyClassesOnValidation(true, el.parentNode)
/*else if (!isChecked(siblings, true)) //else if (!$(el).siblings("input").is(":checked"))
el.parentNode.classList.remove("good")*/
});
});
}
validationButtons(buttons)
// on blur/focus validate/clear validation
function validationInputs(inputFields) {
Array.prototype.forEach.call(inputFields, function (el, index, array) {
// on blur validate input
el.addEventListener("blur", function (event) {
validate(el, event.type)
});
// on focus clear classes
el.addEventListener("focus", function () {
removeClass(el, "good")
removeClass(el, "error")
});
// block characters depending in input type
el.addEventListener("keydown", function (e) {
e = e || window.event;
var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
var charStr = String.fromCharCode(charCode);
var dataValidation = e.target.dataset.validation
if (dataValidation){
// if input only allows text then block number keys from updating input
if (dataValidation.indexOf("vrule_textInput") != -1) {
if (/\d/.test(charStr) || charCode == 97 || charCode == 98 || charCode == 99 || charCode == 100 || charCode == 101 || charCode == 102 || charCode == 103 || charCode == 104 || charCode == 105)
e.preventDefault()
}
// if input only allows numbers block alpha keys from updating input
if (dataValidation.indexOf("vrule_numberInput") != -1 || dataValidation.indexOf("vrule_currency") != -1) {
if (/[a-zA-Z]/.test(charStr)) {
if (charCode != 97 && charCode != 98 && charCode != 99 && charCode != 100 && charCode != 101 && charCode != 102 && charCode != 103 && charCode != 104 && charCode != 105)
e.preventDefault()
}
console.log(charStr, charCode)
if (!/[0-9]/.test(charStr)) {
if (charCode != 9 && charCode != 8 && charCode != 1 && charCode != 96 && charCode != 97 && charCode != 98 && charCode != 99 && charCode != 100 && charCode != 101 && charCode != 102 && charCode != 103 && charCode != 104 && charCode != 105)
e.preventDefault()
}
}
// if input only allows numbers block alpha keys from updating input
if (dataValidation.indexOf("vrule_mobileNumber") != -1 || dataValidation.indexOf("vrule_homeNumber") != -1 || dataValidation.indexOf("vrule_anyPhone") != -1) {
if (charCode == 32 || /[a-zA-Z]/.test(charStr))
if (charCode != 97 && charCode != 98 && charCode != 99 && charCode != 100 && charCode != 101 && charCode != 102 && charCode != 103 && charCode != 104 && charCode != 105)
e.preventDefault()
}
}
});
});
}
validationInputs(inputs)
// on change validate hidden fields and select boxes
function validationOtherInputs(inputFields) {
Array.prototype.forEach.call(inputFields, function (el, index, array) {
el.addEventListener("change", function (event) {
validate(el, event.type)
return
});
});
}
validationOtherInputs(otherInputs)
// format currency inputs on keyup
function validationCurrencyInputs(inputFields) {
Array.prototype.forEach.call(inputFields, function (el, index, array) {
// block decimal points
el.addEventListener("keydown", function (e) {
e = e || window.event;
var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
if (charCode == 190)
e.preventDefault()
});
// format currency
el.addEventListener("keyup", function () {
var formattedValue = formatCurrency(el.value)
el.value = formattedValue
});
// remove decimals from value
el.addEventListener("blur", function () {
var value = el.value
var hasDecimal = value.indexOf(".") > -1;
if (hasDecimal) {
el.value = value.substring(0, value.indexOf("."))
}
});
});
}
validationCurrencyInputs(currencyInputs)
// handle date input fields
function validationDateInputs(inputFields) {
Array.prototype.forEach.call(inputFields, function (el, index, array) {
// on blur
el.addEventListener("blur", function () {
// auto add leading '0' to single digit dates
if (el.value.length == 1 || (el.value.length == 2 && el.value.match(/[a-z]/i))) {
el.value = el.value.replace(/[a-z]/i, "")
el.value = "0" + el.value;
}
// update hidden field with full date, and trigger change event
if (el.parentNode.classList.contains("year")) {
var day = el.parentNode.parentNode.querySelector(".date-input input.day").value,
month = el.parentNode.parentNode.querySelector(".date-input input.month").value,
year = el.parentNode.parentNode.querySelector(".date-input input.year").value,
completeDate = el.parentNode.parentNode.querySelector("input[type='hidden']");
completeDate.value = day + "/" + month + "/" + year;
// trigger change event
var event = CustomEvent("change")// = new Event('change');
completeDate.dispatchEvent(event);
}
// validate if day input blurred and without value
if (el.classList.contains("day")) {
if (el.value == "")
validate(el.parentNode.parentNode.querySelector("input[type='hidden']"), "blur")
}
});
// select text on input focus
el.addEventListener("focus", function () {
// auto add leading '0' to single digit dates
if (el.value.length >= 2) {
el.select();
}
});
// on keyup
el.addEventListener("keyup", function (e) {
// skip to next date input field
var inputValue = el.value, // get input value
inputValueLength = inputValue.length; // get input value length
if (inputValueLength == 2 && inputValue.match(/^\d+$/) != null) { // if input has 2 characters
if (!el.classList.contains("year")) { // if input is not last
if (!e.shiftKey && e.keyCode != 9 && e.keyCode != 16) {
el.nextElementSibling.nextElementSibling.focus()
}
}
}
// set full date
var day = el.parentNode.parentNode.querySelector(".date-input input.day").value,
month = el.parentNode.parentNode.querySelector(".date-input input.month").value,
year = el.parentNode.parentNode.querySelector(".date-input input.year").value,
completeDate = el.parentNode.parentNode.querySelector("input[type='hidden']");
// update hidden field with full date, and trigger change event
if (day && day.match(/^\d+$/) != null && month && month.match(/^\d+$/) != null && year.length == 4 && year.match(/^\d+$/) != null || e.keyCode == 16 || e.keyCode == 8) {
// udpate value
completeDate.value = day + "/" + month + "/" + year;
// trigger change event
var event = CustomEvent("change")// = new Event('change');
completeDate.dispatchEvent(event);
}
});
// on keydown
el.addEventListener("keydown", function (e) {
// block non-numerical keys
e = e || window.event;
var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
var charStr = String.fromCharCode(charCode);
if (/[a-zA-Z]/.test(charStr)) {
if (charCode != 97 && charCode != 98 && charCode != 99 && charCode != 100 && charCode != 101 && charCode != 102 && charCode != 103 && charCode != 104 && charCode != 105)
e.preventDefault()
}
})
});
}
validationDateInputs(dateInputs)
// IE TRIGGER EVENT POLYFILL
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
// update mobile phonenumbers to remove +44/44 and save to hidden field
Array.prototype.forEach.call(mobileInputs, function (el, index, array) {
el.addEventListener("change", function () {
formatPhoneNumber(el)
});
});
function formatPhoneNumber(phoneNumberInput) {
var phonenumber = phoneNumberInput.value,
phonenumber = phonenumber.replace(/\s+/g, '');
var hiddenPhoneInput = getSiblings(phoneNumberInput, "hidden")[0]
if (phonenumber.substring(0, 2) == "07")
hiddenPhoneInput.value = phonenumber
else if (phonenumber.substring(0, 4) == "+447")
hiddenPhoneInput.value = "0" + phonenumber.substring(3)
else if (phonenumber.substring(0, 3) == "447")
hiddenPhoneInput.value = "0" + phonenumber.substring(2)
else
hiddenPhoneInput.value = phonenumber
}
// FORMAT / UNFORMAT CURRENCY
// format currency on input function
function formatCurrency(value) {
if(isNaN(value))
value = value.replace(/,/g, "").replace(/£/g, "");
value += '';
var x = value.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return "£" + x1 + x2;
}
function unFormat(value) {
return Number(value.replace(/,/g, "").replace(/£/g, "").replace(/%/g, ""));
}
// BROWSER DETECT (USED TO TURN OFF IE FUNCTIONALITY)
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{ string: navigator.userAgent, subString: "Edge", identity: "MS Edge" },
{ string: navigator.userAgent, subString: "MSIE", identity: "Explorer" },
{ string: navigator.userAgent, subString: "Trident", identity: "Explorer" },
{ string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
{ string: navigator.userAgent, subString: "Opera", identity: "Opera" },
{ string: navigator.userAgent, subString: "OPR", identity: "Opera" },
{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
{ string: navigator.userAgent, subString: "Safari", identity: "Safari" }
]
};
// get browser user agent info
BrowserDetect.init();