Required Form Fields

[Giantg52]

I understand that to make form fields in HTML required, I simply have to use this script.

 function validateForm()
	 {
	if (document.mailingList.fname.value=="")
		{
		alert("First name must be filled out.");
		return false;
		}
         }

However, this doesn't work for me, as I'm using XHTML and I can't use the name attribute with the <form> tag. If I use the id attribute instead, obviously it doesn't work. So I looked around and tried this:

 function validateForm()
	 {
	if (document.getElementById("mailingList").fname.value=="")
		{
		alert("First name must be filled out.");
		return false;
		}
         }

But it still didn't work. Any help?

[xelawho]

give your form field (not just your form) an id, then use it:

if (document.getElementById("form_field_id").value=="")

although being that one blank space in your form field will satisfy that condition, it's hard to define it as "required"

[Philip M]

if (document.forms[0].fname.value=="") {

But form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. (My newspaper reports a case where a bank customer alled O'Hara could not access his account as apostrophes were not permitted in the field).

Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

[Giantg52]

Most likely I just didn't understand either of you, but neither of those worked.

@Xelawho, what do you mean by giving my form field an id? I tried putting a <span> around the form and giving it an id, but that did nothing. I also tried just using the ids of the individual text boxes, but that didn't work either.

@Phillip M, that simply didn't work. Not sure if I was supposed to add anything, I tried messing with it a little bit but didn't get it to work.

I'm going to put my XHTML code here in case if it makes any difference. Do note that I have multiple fields, if that make any difference.

<form id="mailingList" action="subscribe.html" method="post" onsubmit="return validateForm()">
<p class="maintext">
First Name: <input type="text" name="fname" value="" size="20" /><br />
Last Name: <input type="text" name="lname" value="" size="20" /><br />
E-mail Address: <input type="text" name="email" value="" size="30" /><br />
Age: <input type="text" name="age" value="" size="2" maxlength="3" /><br />
Sex: <select name="sex"><option value="male">Male</option><option value="female" />Female</option></select><br /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>

[Philip M]

Originally Posted by Giantg52

@Phillip M, that simply didn't work. Not sure if I was supposed to add anything, I tried messing with it a little bit but didn't get it to work.

Wel, it works for me Perhaps the problem is that you have two opening braces { one (correctly) on the same line and another one (permissible but less good practice) on the following line.

xelawho told you to assign an id (as well as a name) to each element (form field) - you have not done that.

e.g.
First Name: <input type="text" name="fname" id = "fname" value="" size="20" /><br />

But both of us have pointed out the inadequacy of this simple "validation".

and then address it with

if (document.getElementById("fname").value=="") { // place opening brace on the same line, not the folowing line


But both of us have pointed out the serious inadequacy of this simple "validation".

[Giantg52]

I figured I was doing something wrong, somehow I lost the second 'a' in javascript XD. Thanks for your help .