Working in FF but not IE 7?

form validation

[tonynoriega]

i just noticed that some registration forms are coming through without the proper fields being selected....

it validates in FF but not IE7...

can anyone please help me?

function validateInputs() {
var controls = [
{id:'fname', label:'First Name'},

];
for (var i = 0; i < controls.length; i++) {
var c = document.getElementById(controls[i].id);
if (c.value.length < 1) {
alert('Please enter a value for ' + controls[i].label + '.');
c.focus();
return false;
}
}
return true;
}
function validateSelect() {
var controls = [
{id:'nhm_associate', label:'NHM Agent'},
{id:'lead_type', label:'Lead Type'},
{id:'community', label:'Community Interested In'}
];
for (var i = 0; i < controls.length; i++) {
var c = document.getElementById(controls[i].id);
if (c.selectedIndex == 0) {
alert('Please select a ' + controls[i].label + '.');
c.focus();
return false;
}
}
return true;
}
function validateForm() {
// Check input values
if (!validateInputs()) {
return false;
}
// Check drop downs
if (!validateSelect()) {
return false;
}
return true;
}

[eelixduppy]

Your first problem is the following code:

 var controls = [
{id:'fname', label:'First Name'},

]; 

You have an extra comma in there for no reason and therefore the browser is checking for another object but isn't finding it.

To fix this, it should be changed to the following, just removing the comma:

 var controls = [{id:'fname', label:'First Name'}]; 

Next, you should be comparing values with zero using === not just ==, so change to the following:

if (c.selectedIndex === 0) {

Try that first and see what you get.

[tonynoriega]

ok, i got that to work in IE...

should be more careful with my code...

Now...new issue.

the drop down selections are as follows:

<select name="community" id="community">
<option value="N/A" selected>N/A</option>
<option value="Sonata">Sonata</option>
<option value="Hazelwood Village">Hazelwood Village</option>
<option value="RockHampton">RockHampton</option>
<option value="Newcastle Heights">Newcastle Heights</option>
<option value="Dashwood">Dashwood</option>
<option value="Rosecroft">Rosecroft</option>
<option value="The Cliffs">The Cliffs</option>
</select>

If the user trys to submit without selecting an option, it does prompt the user to select a "community", that works great..

..BUT, once you hit "OK" from the prompt screen, it automatically submits with the selected value of "N/A"...

how can essentially say, in the script, value can not be NA?

becuase even if i remove the property value="N/A", i go through all of the other fields, and once i get to "community" it seems to still be able to submit.

I just noticed as well, then when the prompt comes up for the "community" it says "Error on Page" with the yellow exclamation point in the lower left corner of the browser...

[Trace]

I think it's because as soon as your "for loop" is done, the very next thing it does is "return true".

All you would need to do is add an error counter, or similar, and then validate against that before sending the "true" or "false".

Hope that makes sense.

[tonynoriega]

belay my last...

im not sure i understand error counter?

like this

if (c.value = N/A) {
alert('Please enter a value for ' + controls[i].label + '.');
c.focus();
return false;

and put that after the first if statement?

[Trace]

I had in mind something along these lines;

function validateSelect() {
var controls = [
{id:'nhm_associate', label:'NHM Agent'},
{id:'lead_type', label:'Lead Type'},
{id:'community', label:'Community Interested In'}
];
var errCnt = 0;
for (var i = 0; i < controls.length; i++) {
var c = document.getElementById(controls[i].id);
if (c.selectedIndex == 0) {
errCnt++;
alert('Please select a ' + controls[i].label + '.');
c.focus();
}
}
if(errCnt > 0){
return false;
}else{
return true;
}
}

[tonynoriega]

i see what you mean now, but what that does is prompts each error screen, all 3 in a row, and does not allow the user to select after the prompt... it just goes through the errors, and then submits once the last "OK" is hit...

[tonynoriega]

and my real concern is why would it work fine in FireFox but not IE7?

[Trace]

Yeah - I was way off. Maybe it's how you're calling your validation?

Here's the full test I just did and it work with both FX and IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">
function validateInputs() {
var controls = [
{id:'fname', label:'First Name'}
];
for (var i = 0; i < controls.length; i++) {
var c = document.getElementById(controls[i].id);
if (c.value.length < 1) {
alert('Please enter a value for ' + controls[i].label + '.');
c.focus();
return false;
}
}
return true;
}

function validateSelect() {
var controls = [
{id:'nhm_associate', label:'NHM Agent'},
{id:'lead_type', label:'Lead Type'},
{id:'community', label:'Community Interested In'}
];
for (var i = 0; i < controls.length; i++) {
var c = document.getElementById(controls[i].id);
if (c.selectedIndex === 0) {
alert('Please select a ' + controls[i].label + '.');
c.focus();
return false;
}
}
return true;
}
function validateForm() {
// Check input values
if (!validateInputs()) {
return false;
}
// Check drop downs
if (!validateSelect()) {
return false;
}
return true;
}
</script>

</head>
<body>

<form method="post" action="http://www.google.com" onsubmit="return validateForm()">
<input type="text" id="fname"><br>

<select id="nhm_associate">
<option value="N/A" selected>N/A</option>
<option value="Sonata">Sonata</option>
<option value="Hazelwood Village">Hazelwood Village</option>
<option value="RockHampton">RockHampton</option>
<option value="Newcastle Heights">Newcastle Heights</option>
<option value="Dashwood">Dashwood</option>
<option value="Rosecroft">Rosecroft</option>
<option value="The Cliffs">The Cliffs</option>
</select><br>

<select id="lead_type">
<option value="N/A" selected>N/A</option>
<option value="Sonata">Sonata</option>
<option value="Hazelwood Village">Hazelwood Village</option>
<option value="RockHampton">RockHampton</option>
<option value="Newcastle Heights">Newcastle Heights</option>
<option value="Dashwood">Dashwood</option>
<option value="Rosecroft">Rosecroft</option>
<option value="The Cliffs">The Cliffs</option>
</select><br>

<select id="community">
<option value="N/A" selected>N/A</option>
<option value="Sonata">Sonata</option>
<option value="Hazelwood Village">Hazelwood Village</option>
<option value="RockHampton">RockHampton</option>
<option value="Newcastle Heights">Newcastle Heights</option>
<option value="Dashwood">Dashwood</option>
<option value="Rosecroft">Rosecroft</option>
<option value="The Cliffs">The Cliffs</option>
</select><br>

<input type="submit">
</form>

</body>
</html>

[tonynoriega]

my head just exploded...

i just put the entire script into my page, and removed the call to the .js file...and same freakn thing...

NOW, this is a function in my admin.inc.php page for a secure area for my site, but i dont think that should make a difference....

this is bizarre...