JS below HTML form not running

Hi,

I decided to use Google Forms to record registration and redirect users after submission. But it seems that my JavaScript is not running for some reason. Though the form is submitted but the validation and redirect JS is not running.

Codepen Link

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>


I have checked your code. There was an error in the regex expression. You have to escape the single quote

Hi,

Now it seems to work fine. Thanks!

I brought up a new regex for website validation, but now this is not working.

New Regex

/(((http|ftp|https):\/{2})+(([0-9a-z_-]+\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mn|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|nom|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ra|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw|arpa)(:[0-9]+)?((\/([~0-9a-zA-Z\#\+\%@\.\/_-]+))?(\?[0-9a-zA-Z\+\%@\/&\[\];=_-]+)?)?))\b/imuS

Thank you!

You have two issues here:

  1. Regular Expressions are not strings, so remove the surrounding single quotes.
  2. There is no regular expression flag S. There is a flag s through.

Hi,

Can you suggest me a HTML5 regex which can accept url with or without http://, https://, www.

Thanks

That will depend on the context the url would appear. For example, having the preceding http://, https://, or even //: confirms that the text “could be” a url if it is appears in a string. Can you share an example of where the url would appear in a string that you are trying to identify?