JavaScript validation file not working: "ReferenceError: validateForm is not defined" (html linked)

Question

(edit: code updated)

I am running into an error, when trying to clientside-validate with JavaScript that the user has filled in the forms correctly in the Register part of my HTML form. The HTML and JS file are pretty straightforward:

(Fiddle)

JavaScript and HTML:

function validateForm() {
		var name 	= document.getElementById('username').value;
		var email 	= document.getElementById('email').value;
		
		if (name == null || name == "" || checkIfSpaceOnly(name) == false) {
			return false;
			}
		
		else if (email == null || email == "" || validateEmail(email) == false){
			return false;
			}
	
		else
			return true;
	}
	
  
	//other methods used in validateForm:
	function checkIfSpaceOnly(input) {
	var re = /\S/;
	return re.test(input);
	}

	function validateEmail(email) {
    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,}))$/;
    return re.test(email);
	}
	
  
  
	window.onload = function() 
  {
	var submitBtn 	= document.getElementById('submit');
	submitBtn.addEventListener("click", validateForm);
	}

<!DOCTYPE html5>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="design.css">

</head>

<div class = "body1">
	<div class = "forms" id="forms">
	<h2>Log in</h2>
		<form name='loginform' action='login.php' method='POST'>
			<input type='email' name='email' placeholder="Email" ><br>
			<input type='password' name='password' placeholder="Password" ><br><br>
			<input type='submit' value='Log in'><br><br>
		</form>
		<hr>
		<br><h2>Register</h2>
		<form onsubmit="" name="register" action="register.php" method="POST" onsubmit="return validateForm()">
		
			<input type="text" name="username" class="form-control" placeholder="Username" id="username"><br>
			<input type="email" name="email" class="form-control" placeholder="Email" id="email"/><br>
			<input type="password" name="password" class="form-control" placeholder="Passwoord"><br>
			<br>
			<input type="submit" name="submit" id="submit" value="Create user">
			
		</form>
	</div>
</div>
<script type="text/javascript" src="javascript.js"></script>
</html>

So the problem is, it's like the JS file isn't used at all by the HTML file. The form gladly registers any user, no matter if they fulfill the JavaScript file's if conditions or not.

I checked the console, and it says (when the user has been registered), "ReferenceError: validateForm is not defined".

Except checking that the file directories are correct of course, I have searched and read about both general HTML JS form validation Errors, 20-something "similar question" on here, and that specific ReferenceError. I've changed values, names, moved code parts around.... but I can't seem to find the problem and don't know what to do, although it feels like it's just a simple mistake somewhere in the code.

You have error in your code in line if (uName == "") || checkIfSpaceOnly(uName) == false) { it should be if (uName == "" || checkIfSpaceOnly(uName) == false) { — jcubic
– jcubic, Commented Jun 7, 2016 at 12:58
First thing I'd do is fix the javascript error Uncaught SyntaxError: Unexpected token || — Jamiec
– Jamiec, Commented Jun 7, 2016 at 13:00
Also, try writing your validateForm function before window.onload... — Guruprasad J Rao
– Guruprasad J Rao, Commented Jun 7, 2016 at 13:01
(As below commented) tried this, still didn't work :/ (although the code's a bit different now, check the question/code update if possible, thousand thanks!) As it is now, the console doesn't even print a ReferenceError, the user is simply registered. :l — mbksr
– mbksr, Commented Jun 7, 2016 at 14:01

Jamiec · Accepted Answer · 2016-06-07 14:04:55Z

1

You have 3 problems

Your fiddle is setup incorrectly; all the code is wrapped in an onload which means your validateForm method is not accessible from HTML markup
You have 2 onsubmit attributes in the form - the second contains what it should contain but is being ignored because of the first
You assign the event handler both in markup and in code. Choose one, stick with it.

When you fix these 3 problems, it works as expected and does not submit the form if anything goes wrong (ie, false is returned from validateForm)

https://jsfiddle.net/spwx1rfd/7/

answered Jun 7, 2016 at 14:04

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mbksr Over a year ago

This did fix it, thank you! I thought onload was required always, so there I learnt something, too. Thanks!

Jamiec · Accepted Answer · 2016-06-07 13:10:12Z

0

Please check the if condition, you have made a mistake.

Wrong code

if (uName == "") || checkIfSpaceOnly(uName) == false) {
    return false;
}

Right code

if (uName == "" || checkIfSpaceOnly(uName) == false) {
    return false;
}

edited Jun 7, 2016 at 13:10

Jamiec

136k15 gold badges142 silver badges202 bronze badges

answered Jun 7, 2016 at 13:04

Kumod Singh

2,1631 gold badge16 silver badges18 bronze badges

1 Comment

mbksr Over a year ago

Tried this, still didn't work :/ (although the code's a bit different, check the question/code update if possible, thousand thanks!) As it is now, the console doesn't even print a ReferenceError, the user is simply registered. :l

Collectives™ on Stack Overflow

JavaScript validation file not working: "ReferenceError: validateForm is not defined" (html linked)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related