クライアントサイドフォーム検証？

Question

は誰がフォームの検証は、このページで行われている方法を知っています： https://donate.mozilla.org/page/contribute/the-mozilla-story?source=20111200_snippet_v1&WT_mc_id=story1

はjQueryプラグインや、いくつかのHTML5の機能これです。それを使うことはできますか？

Answer 1

コードの概要は、それがカスタム検証機能であることを示しています。それが役に立つと思われるものは次のとおりです。

   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); 
        } 
       }; 

限りjqueryのプラグインが行くように、私は通常のために行く1はこの1つである - ポップアップが自身をモーダル> J query tools validator

は、ここに示された別のカスタム関数である - >

  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"; 
       }