JS below Form not working, I'm using Google forms record sign up, but it seems that the scrip |
JS below Form not working, I'm using Google forms record sign up, but it seems that the scrip |
saumyabratadutt |
Sep 7 2020, 03:04 AM
Post
#1
|
Group: Members Posts: 1 Joined: 7-September 20 Member No.: 27,531 |
So I thought maybe it's better using Google Forms to record registration than backend MySQL and PHP, so I came up with a code. But it seems that the code below form is not working as the form validation is not taking place.
CODE <!--Form Submission--> <script type="text/javascript"> var submitted = false; </script> <iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted) {window.location = document.getElementById('plans').value;}" ></iframe> <!--HTML Form--> <div class="signin-signup-form"> <div class="form-items"> <div class="form-title">Sign up for new account</div> <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSendXFIFRC9oaraPoXawy6o4-nOYguSm09ugpWZhm5m2EamAw/formResponse" method="POST" target="hidden_iframe" onsubmit="return validateForm();" > <div class="row"> <div class="col-md-6 form-text"> <input type="text" id="fname" name="entry.768879337" placeholder="First Name" required /> </div> <div class="col-md-6 form-text"> <input type="text" id="lname" name="entry.1956988374" placeholder="Last Name" required /> </div> </div> <div class="form-text"> <input type="text" id="site" name="entry.159826737" placeholder="Website" required /> </div> <div class="form-text"> <input type="text" id="email" name="entry.738943549" placeholder="E-mail Address" required /> </div> <div class="form-text"> <select id="plans" class="chosen" name="entry.9479830"> <option selected disabled>Select Plan</option> <option value="https://hostitor.com/thank-you.html"> Freelancer Plan </option> <option value="https://kutt.it/MgQouo"> Professional Plan </option> <option value="https://kutt.it/1ZXq7O"> Enterprise Plan </option> </select> </div> <div class="form-button"> <button id="submit" type="submit" class="ybtn ybtn-accent-color" > Create new account </button> </div> </form> <!-- Form JS Validation --> <script type="text/javascript"> function validateName() { var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; if (fname.length == 0 || lname.length == 0) { alert("Name can't be blank"); return false; } if (!fname.match(/^[a-zA-Z]{3,}(?: [a-zA-Z]+){0,2}$/) || !lname.match(/^[a-zA-Z]{3,}(?: [a-zA-Z]+){0,2}$/)) { alert("Please enter your correct name"); //Validation Message return false; } return true; } function validateWebsite() { var website = document.getElementById("site").value; if (website.length == 0) { alert("Website can't be blank"); //Validation Message return false; } if (!website.match('/^(http|https):\\/\\/[a-z0-9]+([\\-\\.]{1}[a-z0-9]+)*\\.[a-z]{2,5}'.'((:[0-9]{1,5})?\\/.*)?$/i')) { alert("Please enter a correct website"); //Validation Message return false; } return true; } function validateEmail() { var email = document.getElementById("email").value; if (email.length == 0) { alert("Email can't be blank"); //Validation Message return false; } if ( !email.match( /^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/ ) ) { alert("Please enter a correct email address"); //Validation Message return false; } return true; } function validateForm() { if (!validateName() || !validateWebsite() || !validateEmail()) { alert("Form not submitted"); //Validation Message return false; } else { submitted=true; return true; }; } </script> |
CharlesEF |
Sep 14 2020, 03:25 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
You are using the 'onsubmit' attribute of the 'form'. Therefor, you need to handle things differently. Currently, your form will submit even if there are errors. Check the accepted answer here, for a better understanding.
|
Lo-Fi Version | Time is now: 23rd April 2024 - 04:21 PM |