client Side Form validation?

Question

Does anybody know how is form validation done on this page: https://donate.mozilla.org/page/contribute/the-mozilla-story?source=20111200_snippet_v1&WT_mc_id=story1

is this a jquery plugin or some html5 feature. Can I use it?

Answer 1

A quick overview of the code shows that it's a custom validation function. Here's what it looks like if it helps.

                document.getElementById("wsniceform").onsubmit = function()
                {
                    // Validate the form inputs (make sure their name isn't 'First Name', etc)
                    if (formValidates())
                    {
                        if (document.getElementById("wscc_pp").checked)
                        {
                            document.getElementById("wscc_number").disabled = true;
                            document.getElementById("wscc_expir_month").disabled = true;
                            document.getElementById("wscc_expir_year").disabled = true;
                        }
                        else
                        {
                            document.getElementById("wscc_number").disabled = false;
                            document.getElementById("wscc_expir_month").disabled = false;
                            document.getElementById("wscc_expir_year").disabled = false;
                        }

                        document.getElementById("wsaddr2").value = document.getElementById("wsaddr2").value.replace(originalPlaceholder.wsaddr2, "");

                        // If it's not checked, nothing should be in the wsamount_other_value field
                        if (!document.getElementById("wsamount_other").checked)
                            document.getElementById("wsamount_other_value").value = "";

                        // webtrends tracking
                        dcsMultiTrack(
                            'DCS.dcssip', 'donate.mozilla.org',
                            'DCS.dcsuri', '/page/cde/Contribution/Charge',
                            'WT.ti', 'Link: Join Mozilla English Signup',
                            'WT.dl', 99,
                            'WT.z_convert', 'Join Mozilla English Signup',
                            'WT.si_n', 'Join Mozilla English Signup',
                            'WT.si_x', '2');

                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }

                wsTest = {
                    /*
                     * Test for empty input. This is the only testing function that auto-trims input.
                     */
                    IsEmpty: function(str)
                    {
                        if (str.replace(/\s*/g, "").length == 0)
                            return true;
                        return false;
                    },
                    /*
                     * Test for a valid email
                     */
                    ValidEmail: function(str)
                    {
                        return (/^([\w\-\+]+)(\.[\w\-\+]+)*@([\w\-]+)(\.[\w\-]+)+$/.test(str));
                    },
                    /*
                     * Runs function when all images and DOM has loaded
                     */
                    DOMOnLoaded: function(func)
                    {
                        if ((ws.Browser.isIE && !ws.Browser.isCSS3IE) || (ws.Browser.isCSS3IE && ws.Browser.isLegacyMode))
                            window.attachEvent("onload", wsOnLoad);
                        else if (document.addEventListener)
                            window.addEventListener("load", wsOnLoad, false);
                        else
                            window.setTimeout(func, 4000);
                    }
                };

As far as a jquery plugin goes, the one i typically go for is this one -> j query tools validator

The popup modal itself is another custom function shown here ->

            function wsSimpleDialog(title, text)
                {
                    var bgElement = document.createElement("div");
                    bgElement.id = "d" + parseInt(Math.random() * 100000);
                    bgElement.style.position = "fixed";
                    try
                    {
                        bgElement.style.backgroundColor = "rgba(218, 236, 248, 0.8)";
                    }
                    catch(e)
                    {
                        bgElement.style.backgroundColor = "#daecf9"; // Fall back for IE
                        bgElement.style.filter = "alpha(opacity=80)";
                    }
                    bgElement.style.top = "0px";
                    bgElement.style.left = "0px";
                    bgElement.style.bottom = "0px";
                    bgElement.style.right = "0px";
                    bgElement.style.zIndex = "20000";
                    document.body.appendChild(bgElement);

                    msgElement = document.createElement("span");
                    msgElement.style.display = "inline-block";
                    msgElement.style.zIndex = "20001";
                    msgElement.id = "m" + bgElement.id
                    msgElement.style.position = "fixed";
                    msgElement.style.top = "50%";
                    msgElement.style.left = "50%";
                    msgElement.style.border = "1px solid #0079aa";
                    msgElement.style.borderRadius = "4px";
                    msgElement.style.MozBorderRadius = "4px";
                    msgElement.style.webkitBorderRadius = "4px";
                    msgElement.style.backgroundColor = "#0789bb";
                    msgElement.style.color = "#fff";
                    msgElement.style.padding = "16px";
                    msgElement.style.fontSize = "14px";
                    msgElement.style.lineHeight = "16px";
                    msgElement.style.visibility = "hidden";
                    msgElement.innerHTML = "<" + "strong style=\"display: block; text-align: center;\">" + title + "<" + "/strong>" + text + "<" + "a style=\"color: #fff; text-align: center; display: block; margin-top: 16px; font-size: 28px; line-height: 32px; font-family: 'LeagueGothicRegular',Impact,Charcoal,'Arial Narrow Bold',Arial,sans-serif\" href=\"#\" onclick=\"return wsCloseSimpleDialog('" + bgElement.id + "')\">OK<" + "/a>";
                    document.body.appendChild(msgElement);
                    msgElement.style.marginTop = (-1 * msgElement.offsetHeight / 2) + "px";
                    msgElement.style.marginLeft = (-1 * msgElement.offsetWidth / 2) + "px";
                    msgElement.style.visibility = "visible";
                }