Help on Javascript Task - DOM

[Jus S]

I am not very proficient in Javascript but I need to create a cross-browser (works in Firefox and MS IE) input screen that takes in a user’s information for an order via the following:

Full Name (text field)
Address (textarea)
Gender (radio button)
Date of birth (three dropdown lists – day, month, year)
“Send me newsletter” (checkbox)
Hidden total value for order (hidden field)
“Submit Order” button (button).

When the user is done inputting the info, I need to validate using the rules below:
At least 3 characters required in name
Must be over 18 years old
Gender must be selected

If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.

I have a script that I've been working with all week and weekend and I am truly frustrated. The script is quite lengthy but if you would take a look and see where I'm going wrong I would truly appreciate it. I attached it below.

Jus

[jscheuer1]

Total mess. I question some of your choices for input names, and especially the use of a nested form for the order field, but I'm not going to worry too much about any of that, as they could be dictated by other things I have no knowledge of. Here's the script:

<script type='text/javascript'>
function validate(f){
var e = f.elements;
if(e['name'].value.length < 3){
alert('At least 3 characters required in name');
e['name'].focus();
return false;
}
for (var fbut, cbut, v = false, i = e.length - 1; i > -1; --i)
if(e[i].name && e[i].name == 'radioGroup'){
fbut = e[i];
if(fbut.checked){
v = true;
cbut = fbut.value == 'first'? 'Male' : 'Female';
}
}
if (!v){
alert('Gender must be selected');
fbut.focus();
return false;
}
var y = new Date().getFullYear();
if(y - e['birthYear'].options[e['birthYear'].selectedIndex].value < 18){
alert('Must be at least 18 years old');
e['birthDate'].focus();
return false;
}
var a = 'name: ' + e['name'].value + '\n' +
'address:\n' + e['address'].value + '\n' +
'gender: ' + cbut + '\n' +
'DOB: ' + e['birthDate'].options[e['birthDate'].selectedIndex].value + ' ' +
e['birthMonth'].options[e['birthMonth'].selectedIndex].text + ' ' +
e['birthYear'].options[e['birthYear'].selectedIndex].value + '\n' +
'newsletter: ' + (e['news'].checked? 'Yes' : 'No') + '\n' +
'total: ' + document.forms['order'].elements[0].value;
alert(a);
return true;
}
</script>

Your markup can remain mostly unchanged. However, do make these few additions/changes (highlighted):

<form id="form1" name="form1" action="#" onsubmit="return validate(this);">

and at the bottom:

<input type="submit" id="order_button" name="order_button" value="Submit Order" />

[Jus S]

John,

Thank a bunch. It worked great. Question: Would the below portion of the script I did have worked and if so, what was wrong with it? Forgive me, I know not what I do.

function isRequired(formField) {
switch (formField.type) {
case 'text':
if (form1.name.value.length<3)
alert('At least 3 characters required in name');
return false;
case 'select-one':
bday = new Date(getOp("birthYear"), getOp("birthMonth"), getOp("birthDate"));
return !! (((new Date()).getTime() - bday.getTime() ) > 568021248000)
if (formField.value)
return true;
return false;
case 'radio':
for radios = formField.form[formField.name];
for (var i=0;i<radios.length;i++) {
if (radios[i].checked) return true;
}
else {
alert('Gender must be selected');
return false;
case 'checkbox':
return formField.checked;
}
}

[jscheuer1]

I don't think so, and a lot. For one thing:

switch (formField.type)

could never equal/trigger:

case 'select-one':

For another:

for radios = formField.form[formField.name];

is meaningless at best, probably would trigger an error. And even if it there weren't a problem with it, this part:

formField.form[formField.name]

means:

formField

So why bother with all that?


Their are numerous other lapses in logic (and/or whatever), as well as dependence upon other code that I cannot see or evaluate.