This JavaScript code snippet adds inline validation to any form field (input, select and textarea).
Match an element against a given pattern and add a visual hint:
function cgPatternMatch(element, pattern) {
if ((element.value).match(pattern)) {
cgToggleError(element, 'valid');
} else {
cgToggleError(element, 'invalid');
}
}
Match an element against a given value:
function cgValueMatch(e) {
return (e.value !== '') ? true : false;
}
Check if email and email confirmation elements match and add a visual hint:
function cgEmailValidate(e1, e2) {
let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (
e1.value === e2.value &&
pattern.test(e1.value) &&
pattern.test(e2.value)
) {
cgToggleError(e2, 'valid');
} else {
cgToggleError(e2, 'invalid');
}
}
Match an element against a given pattern (based on validation type) and add a visual hint:
function cgFormValidate(element, type) {
if (type === 'alpha') {
let pattern = /^[a-zA-Z\-'.\s]+$/;
cgPatternMatch(element, pattern);
} else if (type === 'numeric') {
let pattern = /^[0-9]{1,10}$/;
cgPatternMatch(element, pattern);
} else if (type === 'alphanumeric') {
let pattern = /^[,'a-zA-Z0-9\-\s]+$/;
cgPatternMatch(element, pattern);
} else if (type === 'date') {
let pattern = /^[,'0-9\/\s]+$/;
cgPatternMatch(element, pattern);
} else if (type === 'email') {
let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
cgPatternMatch(element, pattern);
} else if (type === 'dropdown') {
if (element.value === '') {
cgToggleError(element, 'invalid');
} else {
cgToggleError(element, 'valid');
}
}
}
Next, custom data validation needs some additional HTML parameters and an onload() event.
Read more about custom JavaScript form validation and implementation on my development blog.
Top comments (0)