...

View Full Version : Form Validation Problem



mbrown3
05-26-2012, 02:45 AM
OK, so I have a form that I'm trying to validate with javascript on the client-side, but I'm having an issue. The alerts work fine, but in this case, even when there is content in the email field, I get the alert saying "Email must be filled out", and the form won't submit. I've been through this and through it. Can anyone see why this might be happening?

I've done a number of searches (spent the last 5 hours researching this issue), to no avail. Almost all problems folks have with js validation are trying to get the alerts to work or the form to submit in the first place...not that the form alerts even when the field is filled.

Here is the JS:
<script language="javascript">
<!--
function validateForm()
{
var x=document.forms["contactform"]["fullname"].value;
if (x==null || x=="") {
alert("Name must be filled out");
return false;
}
var y=document.forms["contactform"]["email"].value;
if (y==null || y=="") {
alert("Email must be filled out");
return false;
}
return true;
}
//-->
</script>

And here is the form code itself:
<form action="/gdform.php" method="post" name="contactform" onsubmit="return validateForm()">
<input type="hidden" name="subject" value="Case Studies Access" class="style32" />
<input type="hidden" name="redirect" value="case_studies.html" class="style32" />
<input type="hidden" name="email" value="news@waterscreen.com" class="style32" />
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name:</td>
<td colspan="2">
<input type="text" name="fullname" style="width: 400px" class="style32" />
</td>
</tr>
<tr>
<td>Email:</td>
<td colspan="2">
<input type="text" name="email" style="width: 400px" class="style32" />
</td>
</tr>
<tr>
<td>Company/Organization:</td>
<td colspan="2">
<input type="text" name="company" style="width: 400px" class="style32" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">
<input type="submit" name="Submit" value="Submit" class="style32" />
<input type="reset" name="Reset" value="Reset Form" class="style32" />
</td>
</tr>
</table>
<input type="hidden" name="form_format" value="html" class="style32"/>
</form>

The Company field is not required; the other two are.

Thanks in advance. It's probably something stupid, but at this point I can't see anything off with the code, and have no idea where to go with this.

mbrown3
05-26-2012, 02:57 AM
Oh, and I've tried it and without the "return true;" in the JS snippet, just FYI.

felgall
05-26-2012, 03:12 AM
That code brings back memories. Historical JavaScript and HTML from back in the HTML 3.2 Netscape days.

1. Don't use language="javascript" - that was replaced with type="text/javascript" about 15 years ago.

2. Don't wrap your script in <!-- and //--> as that only hides it from Netscape 1 and IE2 and earlier browsers that no one has used for about 15 or more years.

3. Wrap your form field labels in label tags and use a for attribute to attach them to the form fields - so that those who can't see the form know what label belongs to which field. That will mean you will need to give each form field an id.

4. Use that id to reference the field from JavaScript - the form collection also belongs to the Netscape 4 and earlier days from before JavaScript had the ability to properly interact with the web page.

5. Input fields can never be null so testing for it is a waste of code.

6. Even a single space in the field will result in it failing the =="" test so that test to is a waste and should be replaced with something that actually validates the field properly.

7. Don't use alert - it is now only useful for debugging as it provides the ability to turn off JavaScript in some browsers. Instead use the proper JavaScript commands to insert the error message into the page itself.

8. Don't jumble JavaScript and HTML together. The submit="return validateForm()" should be attached inside the JavaScript and not hard coded in the HTML.

9. To ensure the form is loaded before the script runs you should attach the JavaScript at the bottom of the page.

See http://javascriptexample.net/domform15.php for an example of how to attach JavaScript validations to the individual fields and http://javascriptexample.net/domform13.php for the extra code necessary to validate them all again when the form is submitted.

The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.

Philip M
05-26-2012, 07:54 AM
The reason why your form does not work is that you have two fields with the same name - email.


The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.

IMO that is insufficient as a x or a ? will pass the validation. Prefer to strip leading and trailing spaces
x = x.replace(/^\s+|\s+$/g,"");
and then as a minumum test for field length.

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. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. A proper name may only contain letters, hyphen, space and apostrophe. This topic has been covered many times before in this forum.

A wise man never plays leapfrog with a unicorn - Tibetan proverb

mbrown3
05-26-2012, 04:08 PM
Thanks for the quick reply!


That code brings back memories. Historical JavaScript and HTML from back in the HTML 3.2 Netscape days.

1. Don't use language="javascript" - that was replaced with type="text/javascript" about 15 years ago.
This was actually inserted by Microsoft Visual Studio 11 beta. I changed it to text/javascript, but then it didn't function. Not sure why, but :mad:

2. Don't wrap your script in <!-- and //--> as that only hides it from Netscape 1 and IE2 and earlier browsers that no one has used for about 15 or more years.
This was also inserted automatically by Microsoft Visual Studio 11 beta. :confused:

3. Wrap your form field labels in label tags and use a for attribute to attach them to the form fields - so that those who can't see the form know what label belongs to which field. That will mean you will need to give each form field an id.
Not exactly sure what you mean here. Are you talking about for ADA compliance, etc? This isn't the final code, I'm just trying to get the function working before I do anything else.

4. Use that id to reference the field from JavaScript - the form collection also belongs to the Netscape 4 and earlier days from before JavaScript had the ability to properly interact with the web page.
Again, not sure what you mean here (sorry, I'm not a noob with developing, but am really new to javascript).

5. Input fields can never be null so testing for it is a waste of code.
Why not? My understanding is that null is no value, whereas "" is an actual value that is empty (i.e., it relates to the database...which in this case doesn't matter, but I'd like to know for future reference). And when I started doing research into this, every single example included both NULL and "". No input field can be null?

6. Even a single space in the field will result in it failing the =="" test so that test to is a waste and should be replaced with something that actually validates the field properly.
OK. When trying to find such a thing, that was by far the most recommended method.

7. Don't use alert - it is now only useful for debugging as it provides the ability to turn off JavaScript in some browsers. Instead use the proper JavaScript commands to insert the error message into the page itself.
Again, this was the suggested method when I looked into it (almost all of the results). Not sure how to insert the javascript commands into the page, or what they are. Learning as I go here, but haven't seen anything other than the alert function. Looking at your example below now.

8. Don't jumble JavaScript and HTML together. The submit="return validateForm()" should be attached inside the JavaScript and not hard coded in the HTML.
How would this be done and still attach it to the submit function, which is itself in the form HTML?

9. To ensure the form is loaded before the script runs you should attach the JavaScript at the bottom of the page.
Yeah, I'll move it once I get it working. Old habit of putting all my code in the head section.

See http://javascriptexample.net/domform15.php for an example of how to attach JavaScript validations to the individual fields and http://javascriptexample.net/domform13.php for the extra code necessary to validate them all again when the form is submitted.
Thanks...this is confusing stuff here. I'll poke around with it. Seems overly complicated for what I want to do, but having it work is more important than how easy it is to code. Good to learn in the long-run anyway.

The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.

Again, thanks. I very much appreciate the help. Thanks for putting up with my ignorance.

mbrown3
05-26-2012, 04:09 PM
[QUOTE=Philip M;1233428]The reason why your form does not work is that you have two fields with the same name - email.

Yep...that fixed it. I didn't realize that having a field called "email" for where the results were being posted would "qualify" the same as an input field called "email". Makes sense, but it never crossed my mind.

I'm still working on fixing the code, but at least it's temporarily functional. I don't understand the rest of your post yet, but working on it. And, FYI, I'm less concerned with actual "validation" than with simply having the fields being filled in before the function is passed. It's not remotely a crucial application, so it's not a big deal. But if I'm going to do it, I want to do it right, so I do appreciate the input all around. Thanks!

felgall
05-27-2012, 12:04 AM
IMO that is insufficient as a x or a ? will pass the validation.

Of course x or ? would pass that validation - that validation is just demonstrating the test for the field being mandatory without actually testing what is in it. Basically that test corresponds to the HTML 5 attribute require or pattern="\S+" - both of which do exactly the same thing.

The OP was comparing the field against null and "" so testing that it has something in it is an improvement.

With my example script you simply put the field ids and corresponding regular expressions you want to use to validate each field of the form in the validations object at the top of the code and you get the same end result as if you'd specified an HTML 5 pattern. For example:


var validations = {
nam : /\S+/
, email : /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/
};

The only other change required to get it to validate any form is to add the calls at the bottom to attach the validation to the individual form fields - for example


addEvent(document.getElementById('nam'),
'blur',
valField);
addEvent(document.getElementById('email'),
'blur',
valField);

and to call all the validations again when the form is submitted


valForm = function(e) {
return valField(e,document.getElementById('nam')) &&
valField(e,document.getElementById('email'));
}

addEvent(document.getElementById('email').form,
'submit',
valForm);

None of the rest of the code needs to be changed. You can even add validation of radio buttons (if you have them in the form) to the submit processing by passing any one of the ids used by the radio button group.

It is basically an HTML 4 version of the HTML 5 require and pattern validations with radio button validation added. The only validations it doesn't handle are those that involve multiple fields - you'd need to add those to the valForm function.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum