0
私は自分のHTMLフォームに入れたJavaScriptパラメータを強制するのに苦労しています。基本的には、HTMLフォームの提出が成功する前に、Google SpreadSheetにすべてのパラメータを満足させたいと思います。HTMLフォームでJavascript検証を正しく実施するにはどうすればよいですか？
JavaScriptのパラメータを使わずに、自分のHTMLフォームを自分のGoogleスプレッドシートに直接送信することができます（電子メールの検証は例外です）。これをどうやって解決するのですか？
<!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 = "";
}
}
_ "本質的には、HTMLフォームの提出が成功する前に、すべてのパラメータを満足させたい" _パラメータは何ですか？ – guest271314
これらのスクリプトは何ですか？ 'jquery_005.js'、' jquery_003.js'などとは何ですか？ – nnnnnn
パラメータは、コースヒーローからの正規のURLがテキストボックスに確実に送信されるようにするためのものです。 getcoursehero.jsを参照として追加しました – jreyez