https://www.hong-kong-traveller.com/ssjs/form_builder/validate.js

1function validateFormBuilderForm(formId, fields) {
2    function show(element) {
3        element.style.display = 'block';
4    }
5
6    function hide(element) {
7        element.style.display = 'hidden';
8    }
9
10    function checkEmail(email) {
11        var re = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
12        return email.replace(/^\s\s*/, '').replace(/\s\s*$/, '').match(re);
13    }
14
15    function hasClass(element, class_name) {
16        return element.className.match(new RegExp('(\\s|^)' + class_name + '(\\s|$)'));
17    }
18
19    function addClass(element, class_name) {
20        if (!hasClass(element, class_name)) element.className += " " + class_name;
21    }
22
23    function removeClass(element, class_name) {
24        element.className = element.className.replace(new RegExp('(\\s+|^)' + class_name + '(\\s+|$)'), ' ');
25    }
26
27    var validators = {
28        "general": function(field, required) {
29            if(!required) return true;
30
31            if(typeof(field.value) === "undefined" || ( typeof(field.value) === 'string' && typeof(field.length) !== 'undefined' && field.length > 1 ) ) {
32                // dropdown, radio, or checkbox with more then one element
33
34                for (var i = 0; i < field.length; i++) { 
35                    if ( (field[i].checked || field[i].selected) && field[i].value ) return true;
36                }
37
38                return false;
39            }
40            else if(typeof(field.type) !== "undefined" && (field.type === "radio" || field.type === "checkbox")) {
41                //radio or checkbox with one element
42                return field.checked;
43            }
44            else {
45                //text fields or select fields - can be treated in same way
46                return field.value !== "" && ! field.value.match(/^\s+$/);
47            }
48        },
49        "email": function(field, required) {
50            if(required || field.value !== "") {
51                return checkEmail(field.value);
52            }
53            return true;
54        },
55        "gdpr": function(field, required) {
56            if(!required) return true;
57
58            // all fields inside of the field need to be valid
59            var isValid = true;
60            for (var i = 0; i < field.length; i++) {
61                // we started with isValid = true value - if this field is valid it's going to
62                // stay true, but if not it's going to change to false and stay that way
63                // until the end of the loop
64                // in other words, one invalid field will mark the whole field invalid
65                isValid = isValid && ( (field[i].checked || field[i].selected) && field[i].value );
66            }
67            
68            return isValid;
69        }
70    };
71
72    var form = document.getElementById("formBuilderForm_" + formId);
73    var missingDiv = document.getElementById("MissingFields_" + formId);
74    var submitBtn = form.querySelector('input[type=submit]');
75    var submitBtnParentNode = submitBtn.parentNode;
76    var throbberContainer = document.createElement("span");
77    var throbber = document.createElement("img");
78    throbber.src = '/ssimgs/common/throbber.gif';
79    throbber.alt = '';
80    throbber.className = "formBuilderForm-Throbber";
81    throbberContainer.appendChild(throbber);
82    var allFilled = true;
83
84    for (var i = 0; i < fields.length; i++) {
85        var field_def = fields[i];
86        var field = form[field_def.field_name];
87        var validator = typeof(validators[field_def.type]) === "undefined" ? validators.general : validators[field_def.type];
88        var isFilled = validator(field, field_def.required);
89        var field_label = document.getElementById(field_def.field_label);
90        if(isFilled) {
91            removeClass(field_label, "form_builder_form_field_is_missing");
92        }
93        else {
94            addClass(field_label, "form_builder_form_field_is_missing");
95            if(allFilled) {
96                allFilled = false;
97                if(typeof(field.value) === "undefined") {
98                    //radio or checkbox with more then one element
99                    field[0].focus();
100                }
101                else {
102                    if (field.focus) {
103                        field.focus();
104                    }
105                }
106            }
107        }
108    }
109
110    var captcha_element = form.submission_challenge;
111    if(captcha_element && !captcha_element.value.length) {
112        captcha_element.style.background = "#ff0000";
113        if(allFilled) {
114            captcha_element.focus();
115            allFilled = false;

116        }
117    }
118
119    if(allFilled) {
120        hide(missingDiv);
121    }
122    else {
123        show(missingDiv);
124    }
125
126    if (allFilled) {
127        submitBtnParentNode.replaceChild(throbberContainer, submitBtn);
128    }
129    return allFilled;
130}