如何在HTML表單中正確執行Javascript驗證？

我很難執行我放入我的HTML表單的JavaScript參數。基本上，我希望在成功提交HTML表單之前將所有參數滿足到我的Google SpreadSheet中。如何在HTML表單中正確執行Javascript驗證？

現在發生的事情是，我的HTML表單可以直接提交到我的Google Spreadsheet中，而不必通過JavaScript參數提交（除電子郵件驗證外）。我該如何解決？

<!DOCTYPE html> 

<title>Sample Site</title> 

<!-- STYLE STARTS HERE --> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <!-- Style The Contact Form How Ever You Prefer --> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css"> 
<!-- STYLE ENDS HERE --> 

<!-- The CULPRIT --> 
    <form id="gform" method="POST" class="pure-form pure-form-stacked" 
    action="https://script.google.com/macros/s/AKfycbxjs3igiMCNaHOjBtsiujnGmMpGz_L57LOS7qzegOWpSQ2cyWq-/exec"> 

<!-- CULPRIT --> 

<header class="entry-header"> 
<h1 class="entry-title">Something Else</h1>   
</header> 

<!-- .entry-header --> 
<div class="entry-content"> 
<form method="post" action="checkout/" autocomplete="off" onsubmit="return isValidForm()"> 
<label for="buyer_email" style="font-weight: bold">Email:</label><p></p> 
<p></p> 
<p> <input id="buyer_email" name="buyer_email" placeholder="[email protected]" 
size="50" onfocus="removeHighlightEmail()" required="" type="text"></p> 
<p> <label for="links_string" style="font-weight: bold">Course Hero links:</label></p> 
<p></p> 

<p> <textarea cols="200" id="links_string" name="links_string" 
placeholder="https://www.coursehero.com/file/6007102/Tutorial-91-92-Gauss-Law/" 
onfocus="removeHighlightTextArea()" oninput="checkTutor()" rows="7" required=""></textarea></p> 
<p></p> 

<div id="info_text"></div> 
<p></p> 
<p> <input value="Pay" type="submit"><br></p> 
</form> 
<span class="" style="display:block;clear:both;height: 
0px;padding-top: 100px;border-top-width:0px;border-bottom-width:0px;"></span> 
<p style="visibility: hidden;">.</p> 

<!-- Lightbox Plus Colorbox v2.7.2/1.5.9 - 2013.01.24 - Message: 1--> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    $("a[rel*=lightbox]").colorbox({initialWidth:"30%",initialHeight:"30%",maxWidth:"90%",maxHeight:"90%",opacity:0.8}); 
    $(".popup").colorbox({speed:300,width:"80%",height:"90%",innerWidth:"50%",innerHeight:"50%",initialWidth:"30%",initialHeight:"40%",maxWidth:"90%",maxHeight:"90%",opacity:0.5,iframe:true}); 
}); 
</script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/jquery_005.js"></script> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
var _wpcf7 = {"loaderUrl":"http:\/\/docunlocks.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptchaEmpty":"Please verify that you are not a robot.","sending":"Sending ..."}; 
/* ]]> */ 
</script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/scripts.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/jquery_003.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/jquery_004.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/helpers-functions.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/helpers_002.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/helpers-beaver.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/skip-link-focus-fix.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/getcoursehero.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/jquery_002.js"></script> 
<script type="text/javascript" src="Unlock%20Documents%20%E2%80%93%20Doc%20Unlocks_files/wp-embed.js"></script>

getcoursehero.js

function validateEmail() { 
     var email = document.getElementById("buyer_email").value; 
     var textInvalidEmail = document.getElementById("text_invalid_email"); 
     var valid = false; 

     var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     if(re.test(email)){ 
      valid = true; 
     } 

     return valid; 
    } 

    function validateLinks(){ 
     var links = document.getElementById("links_string").value; 
     var valid = false; 

     var reg = /((https:\/\/)?(www.)?(coursehero.com\/)(tutors-problems|file)\/[a-z0-9\-+]+(\/)[a-z0-9\-\%]+(\/)?)/gi; 

     if(links.match(reg)){ 
      valid = true; 
     } 

     return valid; 
    } 

    function removeHighlightEmail(){ 
     document.getElementById("buyer_email").style.boxShadow = "none"; 
    } 

    function removeHighlightTextArea(){ 
     document.getElementById("links_string").style.boxShadow = "none"; 
    } 

    function isValidForm(){ 
     var result = true; 

     if(!validateEmail()){ 
      document.getElementById("buyer_email").style.boxShadow = "0px 0px 5px red"; 
      result = false; 
     } 

     if(!validateLinks()){ 
      document.getElementById("links_string").style.boxShadow = "0px 0px 5px red"; 
      result = false; 
     } 

     return result; 
    } 

    function checkTutor(){ 
     var links = document.getElementById("links_string").value; 

     var reg = /((https:\/\/)?(www.)?(coursehero.com\/)(tutors-problems)\/[a-z0-9\-+]+(\/)[a-z0-9\-\%]+(\/)?)/gi; 

     if(links.match(reg)){ 
      document.getElementById("info_text").innerHTML = "<p>Before proceeding further, make sure the tutor-problem question(s) has been answered and make sure there's a file attachment in the solution (very important). <a target=\"_blank\" style=\"text-decoration: underline;\" href=\"https://www.coursehero.com/tutors-problems/Java-Programming/8788216-iLab-5-of-6-GUI-Graphics-and-File-IO-40-points-0243-PM-MT-09282/\">Click here</a> to see an example of a valid tutor-problem question (scroll down and notice that there's a file attachment in the tutor answer). You may proceed to the next step after this verification.</p>"; 
      //document.getElementById("info_text").style.color = "#199cd8"; 
      document.getElementById("info_text").style.color = "red"; 
     }else{ 
      document.getElementById("info_text").innerHTML = ""; 
    } 
}

來源

2017-04-03 jreyez

_「基本上我希望所有參數都滿意，然後成功提交HTML表單」_什麼是參數？ – guest271314

這些腳本都是什麼？什麼是「jquery_005.js」，「jquery_003.js」等？ – nnnnnn

參數是爲了確保課程英雄的合法URL被提交到文本框中。我添加了getcoursehero.js作爲參考 – jreyez

我看看你的代碼，它看起來你需要你缺少設置表單的名稱的屬性。

<form method="post" name="yourFormsName" action="checkout/" autocomplete="off" 
onsubmit="return isValidForm()">

我做了一個測試這個頁面來測試我的觀點。

https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js

如果刪除name屬性也不會進行驗證。

希望它有幫助。

來源

2017-04-03 03:54:30

如何在HTML表單中正確執行Javascript驗證？

回答

相關問題