...

View Full Version : Form Validation works beautifully in IE but not in FF or Chrome?



scank
05-27-2009, 12:16 AM
Hi,

I have used the JavaScript from www.tizag.com for form validation.

The javascript 'should validate my form for empty fields of 'name' and 'message', and for a valid email address.

This works perfectly in IE, but in FireFox and Chrome (and mostly likely all other decent browsers), the validation does not work as required...

For example, in FireFox, when I click to submit my form without any fields input, I receive the error 'Please enter a name.' which is great! But then when i do enter a name, the form decides to send, when instead it should validate the next field that is empty! (and this works in IE7!!!)

Anyway here is my JavaScript code:


<script type='text/javascript'>

function formValidator(){
// Make quick references to our fields
var name = document.getElementById('name');
var message = document.getElementById('message');
var email = document.getElementById('email');

// Check each input in the order that it appears in the form!
if(isAlphabet(name, "Please enter your name.")){
if(isAlphanumeric(message, "Please enter a message.")){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}



}


return false;

}

function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}




function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>

and my html for my form is simply this:


<form method="post" id="form" onsubmit="return formValidator()" action="mail/sendmailcontact.php">
<p> </p>

<label>Name:</label> <input name="name" id="name" size="40" type="text" /> <br />

<label>Email Address:</label> <input name="email" id="email" size="40" type="text" /> <br />

<label>Your Interest:</label><select name="regarding" id="regarding"> <option value="building" selected="selected">building</option> <option value="maintenance">maintenance</option> <option value="landscaping">landscaping</option> <option value="exterior design">exterior design</option> <option value="Other">Other</option> </select> <br />

<label>Message:</label> <textarea name="message" rows="8" cols="8"></textarea> <br />

<label>How did you find Velivo?</label> <select name="foundby" id="foundby"> <option value="Word of Mouth">Word of Mouth</option> <option value="Search Engine" selected="selected">Search Engine</option> <option value="Online Advertisment">Online Advertisment</option> <option value="Newspaper">Newspaper</option> <option value="Leaflet">Brochure</option> </select> <br />

<input name="submit" class="btn" size="30" value="Send Message" type="submit" /> </form>

I have spent over 4 hours trying to work out why it only works perfectly in IE7! Please help me on this, I would much appreciate it!

Thank you.

Old Pedant
05-27-2009, 12:26 AM
So what do you see if you run the script via FireBug in FF??

Seems a clumsy way to do validation, by the by.

I know, not your fault, since you cloned the code, but...

scank
05-27-2009, 12:32 AM
I am a beginner, trying to learn. I was just looking for a way to be able to validate the fields in my form.

The bug I get when the script is run with FireBug is; 'elem is null' on line 156 which points to here:


if(elem.value.match(alphaExp)){

Old Pedant
05-27-2009, 12:40 AM
HAH! Obvious when you debug!

After doing
var message = document.getElementById('message');

you find that the variable message is *NULL*!

And why is that?

Because of this:


<textarea name="message" rows="8" cols="8"></textarea>

You see any ID on that field??? No??? Me neither.

MSIE will use the name of a form field as its ID if an ID is not specified. That's not what all good browsers do.

Old Pedant
05-27-2009, 12:40 AM
*DO* get Firebug and learn to debug in Firefox. It will save you HOURS AND HOURS of time.

Back in a moment with an improvement on that code.

scank
05-27-2009, 12:44 AM
I cannot believe I did not spot that!!!!!! I feel like an idiot, and I even knew about the fact that IE uses the name as its ID....

Thank you so much for the help, and rapid responses!

scank
05-27-2009, 12:47 AM
Ok, well I will check back tomorrow morning, as I live in UK its 1am! Thanks again.

Old Pedant
05-27-2009, 01:09 AM
Here's my simplified version of all that.

Got rid of all the unneeded ID='s. If you use the form as a referrent, you don't need ID's. Got rid of all the VALUE= in your <OPTION>s. When the VALUE= is the same as the text, you don't need it. (HTML will send the text to your PHP page when there is no VALUE= present...an HTML feature, nothing to do with PHP, per se.) Got rid of your <label>s. If you had a style for them, put them back in. But if you don't have a style and you don't use <label for="[id of some field]"> then they aren't doing anything useful.

Note the use of this in the call to the validator.


<script type='text/javascript'>

var reName = /^[a-z]+(\s?[a-z]+)+$/i;
var reMessage = /^.{10,999}$/
var reNoCode = /[\<\>\[\]]/;
var reEmail = /^[\w\-\.\']+\@([\w\-\']+\.)+[a-zA-z]{2,6}$/;

function formValidator(form)
{
return reTest( form.name, reName, true, "Please enter your name, letters and space only" )
&& reTest( form.message, reMessage, true, "Please enter a message of at least 10 characters" )
&& reTest( form.message, reNoCode, false, "Please do not use < or > or [ or ] in your message" )
&& reTest( form.email, reEmail, true, "Please enter a valid email address" );
}

function reTest( fld, re, testFor, oops )
{
if ( re.test(fld.value) == testFor ) return true;
alert( oops );
fld.focus( );
return false;
}
</script>
<form method="post" id="form" onsubmit="return formValidator(this)" action="mail/sendmailcontact.php">
<p> </p>
Name: <input name="name" size="40" type="text" /> <br />
Email Address: <input name="email" size="40" type="text" /><br />
Your Interest: <select name="regarding">
<option>building</option>
<option>maintenance</option>
<option>landscaping</option>
<option>exterior design</option>
<option>Other</option>
</select> <br />
Message: <textarea name="message" rows="8" cols="8"></textarea> <br />
How did you find Velivo? <select name="foundby">
<option>Word of Mouth</option>
<option selected>Search Engine</option>
<option>Online Advertisment</option>
<option>Newspaper</option>
<option value="leaflet">Brochure</option>
</select> <br />
<input name="submit" class="btn" size="30" value="Send Message" type="submit" />
</form>

scank
06-04-2009, 10:59 PM
Thanks, this is great. However, I have come across a problem with my javascript code that I used orginally (as this is what I am still using).

In name field, if i enter 'john smith' i get prompted with the error message; 'please enter a name'...

I I enter 'john' it works fine and accepts the value. This also happens in my message text area. I cant fill in a field containing spaces!!!

So basically my name and message fields do not work if you enter spaces between words. How do I fix this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum