Question

我很难执行我在HTML表单中添加的JavaScript参数。基本上我希望在成功提交HTML表单之前满足所有参数到我的Google SpreadSheet中。

现在正在发生的事情是，我的HTML表单可以直接提交到我的Google电子表格中，而无需通过我的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="yourpersonalemail@gmail.com" 
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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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 = "";
    }
}

Answer 1

我查看了您的代码，看起来您需要您缺少设置表单的名称属性。

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

我使用此页面进行了测试以测试我的观点。

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

如果删除name属性，则不会进行验证。

希望它有所帮助。

如何在HTML表单中正确实施Javascript验证？

1 个答案: