keep data in form after validation check turns up an error

[canajien]

How do I keep the form from resetting itself after the validation
check has found a missing field? Every time a missing field is found
and you click ok to go to the missing item it reset all the
information

my validation code is follows:

function validateForm(form)
{
// check name
if (""==document.forms.form.name.value)
{
alert ("Please enter a name!");
document.forms.form.name.focus();
return false;
}

// beach_visited
if (!document.forms.form.beach_visited_0.checked &&
!document.forms.form.beach_visited_1.checked &&
!document.forms.form.beach_visited_2.checked) {
// no radio button is selected
alert ("Please select a beach!");
document.forms.Beach_Control.beach_visited.focus();
return false;
}

// check month
if ( document.forms.form.Month.selectedIndex == 0 )
{
alert ( "Please select the month." );
document.forms.form.Month.focus();
valid = false;
}

}


what am I missing here?


Thanks

 

[Henry]

How do I keep the form from resetting itself after the validation
check has found a missing field?  Every time a missing field is found
and you click ok to go to the missing item it reset all the
information

what am I missing here?

A - return - statement in your - onsubmit - attribute.

 

[canajien]

ok, in the form tag I currently have:

onSubmit="return validateForm(form)"

what should it read?

 

[Thomas 'PointedEars' Lahn]

How do I keep the form from resetting itself after the validation
check has found a missing field? Every time a missing field is found
and you click ok to go to the missing item it reset all the
information

my validation code is follows:

function validateForm(form)
{
// check name
if (""==document.forms.form.name.value)

IMHO it is prudent to have the constant value you compare against right-hand
side instead. And if you don't want to, at least be consistent in your code:

{
alert ("Please enter a name!");
document.forms.form.name.focus();
return false;
}

// beach_visited
if (!document.forms.form.beach_visited_0.checked &&
!document.forms.form.beach_visited_1.checked &&
!document.forms.form.beach_visited_2.checked) {
// no radio button is selected
alert ("Please select a beach!");
document.forms.Beach_Control.beach_visited.focus();
return false;
}

// check month
if ( document.forms.form.Month.selectedIndex == 0 ) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
{
alert ( "Please select the month." );
document.forms.form.Month.focus();
valid = false;
}

}

what am I missing here?

As Richard said. Also, a form control should almost never have the name
`name', as form objects already have a `name' property to yield the value of
the corresponding form element's `name' attribute. (That goes for `submit'
as well, form objects have a method of that name; another common mistake.)
If it had, you would have to refer to it using

document.forms["form"].elements["name"].value

That goes for the rest of your references as well. However, you can shorten
those quite a bit, making it more efficient (and less error-prone; currently
you are relying on an object in the scope chain to have a `form' property to
refer to the form named `form', that is using a proprietary feature[1]):

function validateForm(f)
{
var es = f.elements;
... es["name"].value ...
}

<form ... onsubmit="return validateForm(this)">
...
</form>

(As you can see, as for form validation the form does not need a name.)

And then in the last test you only set the (here) unbound identifier `valid'
to `false'; you are not returning `false' and so you are not preventing the
default action of the event which is to submit the form ("the form [...]
resetting itself", as you called it). Maybe it was your intention to use a
local variable, but then you would have to declare it and return its value
instead:

function validateForm(form)
{
var valid = true;
...
return valid;
}

Your code was hard to read. You would be well-advised to indent it
properly, especially block statements, and be consistent in all your
Pretty Printing, not only for posting it here.


PointedEars
___________
[1] <bfb3f757-7657-4215-a2e0-68a7a69738eb@s37g2000prg.googlegroups.com>

 

[canajien]

this helped, thanks

ok, in the form tag I currently have:

onSubmit="return validateForm(form)"

what should it read?

onsubmit="return validateForm(this)"

And in your function replace "document.forms.form" with "form":

function validateForm(form){

if (""==form.name.value){
alert ("Please enter a name!");
form.name.focus();
return false;}

// beach_visited?
if (
!form.beach_visited[0].checked &&
!form.beach_visited[1].checked &&
!form.beach_visited[2].checked) {
// no radio button is selected
alert ("Please select a beach!");
//document.forms.Beach_Control.beach_visited.focus();
The line above is nonsense, probably sb:
form.beach_visited.focus();
//But I don't know if you can focus on a radio group.
return false;}

// check month
if ( form.Month.selectedIndex == 0 ){
alert ( "Please select the month." );
form.Month.focus();
return false;}
return true;
}

Mick