How do I correctly enforce Javascript Validation in HTML Form?

Question

I'm having a hard time enforcing the JavaScript parameters I have put into my HTML Form. Essentially I want all the parameters satisfied, before a successful submission of the HTML Form, into my Google SpreadSheet.

What is happening now, is that my HTML form can be submitted (with the exception of email validation) directly into my Google Spreadsheet, without going through my JavaScript parameters. How do I fix this?

<!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

I look at your code and it looks you need you are missing to set the name's property of your form.

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

I did a testing with this page to test my point.

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

if you delete the name property it will not validate.

Hope it helps.

How do I correctly enforce Javascript Validation in HTML Form?

Question

1 answers

solution1
0 2017-04-03 03:54:30

How do I correctly enforce Javascript Validation in HTML Form?

Question

1 answers

solution1 0 2017-04-03 03:54:30

solution1
0 2017-04-03 03:54:30