Basic Form Validation

[.Panties]

Having a bit of trouble with some basic form validation, basically what is meant to happen is if any of the fields are empty when the user clicks submit, a message comes up in the span 'eFld1'. At first i thought it was because document.write() had already been run but after adding an alert() to the script that didnt work either so im quite stumped as to whats going on

What am i doing wrong and what should i be doing?


Script in Header

<script type="text/javascript">
var errorList1 = ""
var errorList2 = ""
var regForm = document.register

function validateForm() {

	if (regForm.uName.value == null) {
		alert('somethings wrong')
		return false;
	} 
	
	else {
		return true;
	}
}
</script>

Form

<form name="register"  method="post">
<span id="eFld1">
</span>
Name: <br />
<input type="text" name="bName" /><br />
Phone: <br />
<input type="text" name="bPhone" /><br /><br />
<span id="eFld2">
</span>
Name: <br />
<input type="text" name="uName" /><br />
Phone: <br />
<input type="text" name="uPhone" />
<input type="submit" onSubmit="validateForm"/>
</form>

Any help would be appreciated.

[Kor]

The submit action belongs to the FORM element, not to the button. Anyway, to prevent an action you should "ask" for a certain return from the function. And when you call a function, call a function, () included.

<form name="register"  method="post" onsubmit="return validateForm()">
...
<input type="submit" value="Submit" />

Now the JavaScript code has also some mistakes

var regForm = document.register

function validateForm() {

	if (regForm.uName.value == null) {

1. You try to refer an element (the form) before he was actually loaded. You should use the reference inside the function, as a local variable, not as global. In fact you don't need that: You may pass the form itself to the function, on using the self reference: this

2. A value of an element is never null (by the way, in JavaScript null is an object, not a value. So that only the objects defined, but without any clear reference can be null). It is an empty string

So:

<script type="text/javascript">
var errorList1 = ""
var errorList2 = ""
function validateForm(regForm) {

	if (regForm['uName'].value == '') {
		alert('somethings wrong')
		return false;
	} 
}
</script>
...
...
<form name="register"  method="post" onsubmit="return validateForm(this)">
...
<input type="submit" value="Submit" />

You don't need to return true. If the validation is passed, the function returns itself, which is equivalent with a Boolean true anyway.