The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> JS below Form not working, I'm using Google forms record sign up, but it seems that the scrip
saumyabratadutt
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
CharlesEF
post Sep 14 2020, 03:25 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,787
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th October 2020 - 03:41 AM