form submitting after failed validation

[Gobind]

Hi,

I am trying to submit a form and validate it (on client side using
javascript) before it gets committed to the database. What I do is
when the user hits the submit button, I follow to a JS function which
validates the data and returns a true if everything is ok, but a false
if something is wrong. In my mind, if the function returns a false,
the submit should not proceed. But for some reason, even after failing
validation, the form submits and tries to write this data to the
database. How can I stop this?

Just for reference, here is the code I am using:

//form definition
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">
//submit button definition
<input type="submit" onclick="submit_click()" value="Submit Changes">

//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();
}

//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selectedIndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")
{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
-1 )
{
alert ("Invalid email address.");
return false;
}
return true;
}

Any help is greatly appreciated. Thanks in advance.

Kind regards,

Gobind Johar

 

[David Mark]

Hi,

I am trying to submit a form and validate it (on client side using
javascript) before it gets committed to the database. What I do

Just so you know that you must validate it on the server too.

is

when the user hits the submit button, I follow to a JS function which
validates the data and returns a true if everything is ok, but a false
if something is wrong. In my mind, if the function returns a false,
the submit should not proceed. But for some reason, even after

That's right.

failing

validation, the form submits and tries to write this data to the
database. How can I stop this?

Just for reference, here is the code I am using:

//form definition
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">
//submit button definition
<input type="submit" onclick="submit_click()" value="Submit Changes">

Get rid of that onclick handler and put the logic in the onsubmit
handler. You can't expect the onsubmit event to fire when you
programmatically submit the form.

//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();

}

//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selectedI­ndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")
{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
-1 )
{
alert ("Invalid email address.");
return false;
}
return true;

}

Any help is greatly appreciated. Thanks in advance.

Kind regards,

Gobind Johar

 

[Gobind]

Hi,

I am trying to submit a form and validate it (on client side using
javascript) before it gets committed to the database. What I do

Just so you know that you must validate it on the server too.

is

when the user hits the submit button, I follow to a JS function which
validates the data and returns a true if everything is ok, but a false
if something is wrong. In my mind, if the function returns a false,
the submit should not proceed. But for some reason, even after

That's right.

failing

validation, the form submits and tries to write this data to the
database. How can I stop this?

Just for reference, here is the code I am using:

//form definition
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">
//submit button definition
<input type="submit" onclick="submit_click()" value="Submit Changes">

Get rid of that onclick handler and put the logic in the onsubmit
handler. You can't expect the onsubmit event to fire when you
programmatically submit the form.

//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();

}

//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selectedI­ndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")
{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
-1 )
{
alert ("Invalid email address.");
return false;
}
return true;

}

Any help is greatly appreciated. Thanks in advance.

Kind regards,

Gobind Johar

Hey

Thanks for your reply. I tried what you said, and now my code does not
run the validation function at all and simply submits the form. Plus,
I know for a fact that the onsubmit event runs even if you
programmatically submit a form (this same technique works in two of my
other forms, but doesn't seem to work in this particular instance).

Gobind

 

[David Mark]

Just so you know that you must validate it on the server too.

That's right.

Get rid of that onclick handler and put the logic in the onsubmit
handler. You can't expect the onsubmit event to fire when you
programmatically submit the form.

//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();
}
//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selectedI­­ndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")
{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
-1 )
{
alert ("Invalid email address.");
return false;
}
return true;
}
Any help is greatly appreciated. Thanks in advance.
Kind regards,
Gobind Johar

Hey

Thanks for your reply. I tried what you said, and now my code does not
run the validation function at all and simply submits the form. Plus,
I know for a fact that the onsubmit event runs even if you
programmatically submit a form (this same technique works in two of my
other forms, but doesn't seem to work in this particular instance).

Gobind- Hide quoted text -

- Show quoted text -

Post your revised code. Also, I just noticed you spelled onsubmit as
"onSubmit", which is wrong, but it is not the cause of the problem.

You are 100% wrong about the onsubmit event. Get your facts straight
and try again.

 

[Gobind]

Hi,
I am trying to submit a form and validate it (on client side using
javascript) before it gets committed to the database. What I do
Just so you know that you must validate it on the server too.
is
when the user hits the submit button, I follow to a JS function which
validates the data and returns a true if everything is ok, but a false
if something is wrong. In my mind, if the function returns a false,
the submit should not proceed. But for some reason, even after
That's right.
failing
validation, the form submits and tries to write this data to the
database. How can I stop this?
Just for reference, here is the code I am using:
//form definition
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">
//submit button definition
<input type="submit" onclick="submit_click()" value="Submit Changes">
Get rid of that onclick handler and put the logic in the onsubmit
handler. You can't expect the onsubmit event to fire when you
programmatically submit the form.
//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();
}
//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selectedI­­ndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )
{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")
{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)
{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@")!=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter")!=
-1 )
{
alert ("Invalid email address.");
return false;
}
return true;
}
Any help is greatly appreciated. Thanks in advance.
Kind regards,
Gobind Johar

Hey

Thanks for your reply. I tried what you said, and now my code does not
run the validation function at all and simply submits the form. Plus,
I know for a fact that the onsubmit event runs even if you
programmatically submit a form (this same technique works in two of my
other forms, but doesn't seem to work in this particular instance).

Gobind- Hide quoted text -

- Show quoted text -

Post your revised code. Also, I just noticed you spelled onsubmit as
"onSubmit", which is wrong, but it is not the cause of the problem.

You are 100% wrong about the onsubmit event. Get your facts straight
and try again.

//form def
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">

//button def
<input type="submit" value="Submit Changes"></input>

I am not using the onclick handler anymore and technically the submit
button, when clicked, should be able to invoke the onsubmit event. But
apparently the validation does not run at all.

Gobind

 

[Gobind]

[snip]

I am not using the onclick handler anymore and technically the submit
button, when clicked, should be able to invoke the onsubmit event. But
apparently the validation does not run at all.

What makes you think it isn't running? I suspect it is running and failing.
How are you debugging the script? Also, I noticed that you were referring
to your form as a property of the document object, which is incorrect. Use
the document.forms object to look it up by name.

I had alert messages in my validation function, so anything wrong
would pop up a message telling me so. Now it's fixed though. Not sure
what was stopping it from running. I just removed the changes and
redid them, and it started working.
Thanks for your help.
Gobind

 

[Evertjan.]

Gobind wrote on 13 jul 2007 in comp.lang.javascript:

Hi,

I am trying to submit a form and validate it (on client side using
javascript) before it gets committed to the database. What I do is
when the user hits the submit button, I follow to a JS function which
validates the data and returns a true if everything is ok, but a false
if something is wrong. In my mind, if the function returns a false,
the submit should not proceed. But for some reason, even after failing
validation, the form submits and tries to write this data to the
database. How can I stop this?

Just for reference, here is the code I am using:

//form definition
<form name="newpage" action="./task_submituser.jsp" method="post"
onSubmit="return validate_form()">
//submit button definition
<input type="submit" onclick="submit_click()" value="Submit Changes">

//function submit_click()
function submit_click()
{
document.newpage.newemail.value = document.newpage.email.value;
document.newpage.submit();
}

You are doing a double submit via submit(), and via type=submit
This can lead to timing inconsequences.

Either us a type=button button, or do not do the submit()

And when the first, you could put

document.newpage.newemail.value = document.newpage.email.value;

into the validate_form() function

====

For cross browser safety use:

document.forms['newpage'].elements['newemail'].value

//function validate_form()
function validate_form()
{
var newname = document.newpage.username.value;
var newid = document.newpage.corpid.value;
var newphone = document.newpage.phone.value;
var newradio = document.newpage.radio.value;
var newemail = document.newpage.email.value;
if (document.newpage.dept_select.selectedIndex == 0)
{
alert("Invalid department.");
return false;
}
else
{
var newdept =
document.newpage.dept_select.options[document.newpage.dept_select.selec
tedIndex].value;
}
if ( isNaN( parseInt( newphone ) ) || newphone.length != 4 )

Why not:

if (!/^\d{4}$/.test(newphone))

{
alert ("Your phone number must be 4 digits.");
return false;
}
if (newradio != "null" && newradio != 0 && newradio != "")

if (!!newradio)

{
if ( isNaN( parseInt( newradio ) ) || newradio.length != 4)

if (!/^\d{4}$/.test(newradio))

{
alert ("Your radio number must be 4 digits.");
return false;
}
}
else
document.newpage.radio.value="0";
if ( newemail.search("@gm.com") != -1 || newemail.search("@") !=
-1 || newemail.search(".com") != -1 || newemail.search("--Enter") !=
-1 )

if /(@gm\.com)|(@)|(\.com)|(@)|(\-\-Enter)/.test(newemail)

But it seems to me the first is covered by the second and the third, so:

if /(@)|(\.com)|(@)|(\-\-Enter)/.test(newemail)

will do.

But are you sure the above are prohibited?
Surely it must be:

newemail.search("@") == -1

{
alert ("Invalid email address.");
return false;
}
return true;
}

Any help is greatly appreciated. Thanks in advance.

In total I think(!) this will work:

=============================

<form name='newpage'
action='./task_submituser.jsp' method='post'
onSubmit='return validate_form()'>

<input type='submit' value='Submit Changes'>

........

function validate_form() {
var npe = document.forms['newpage'].elements;

var newname = npe['username'].value;
var newid = npe['corpid'].value;
var newphone = npe['phone'].value;
var newradio = npe['radio'].value;
var newemail = npe['email'].value;

npe['newemail'].value = newemail;

if (npe['dept_select'].selectedIndex == 0) {
alert('Invalid department.');
return false;
};

// the else clause is not necessary after a "return"

var newdept =
npe['dept_select'].options[npe['dept_select'].selectedIndex].value;

// you are not using this local variable "newdept"
// anywhere in this function, so you can leave it out, methinks.

if (!/^\d{4}$/.test(newphone)) {
alert('Your phone number must be 4 digits.');
return false;
};

if (!/^\d{4}$/.test(newradio)) {
alert('Your radio number must be 4 digits.');
return false;
};

// the else is not necessary after a "return"

if (!!newradio) // you could leave this 'if' line out????
npe['radio'].value = '0';

if (!/(@gm\.com)|(--Enter)/i.test(newemail)) {
// I think this is what you want, but ...
alert('Invalid email address.');
return false;
};
return true;
};

=============================