JS to check for form Validation does not work

jennypretty · December 8th, 2008, 08:50 AM

Hello,

I have one question about including a JS file on my ASP page. Asp works fine. When I include a JS file, it does not do anything when I hit "Submit". It should check for empty fields.

Does it relate to onChange="javascript:frmSelect.submit(); on my ASP page?
If yes, how do I fix it to make my form validation work?

Thanks so much.

Here is my code:

<head>
<title>Example combo box</title>
<script language="JavaScript" type="text/javascript" src="inc/js.js"></script>
</head>
<form name="frmSelect" method="Post" action="selectcombo1.asp">
...
<SELECT name="cars" onChange="javascript:frmSelect.submit();">
...
<p><input name="Submit" type="submit" value="Submit"></p>
----------------------------------------------------------
js.js file:

var maxC=100;
function limC(obj){
while(obj.value.length>maxC){
obj.value=obj.value.replace(/.$/,'');
}
}

function chFrm() {
var digits = "0123456789"; // Email validation check
var chEmail = new RegExp("^[\\w-_\.]*[\\w-_\.]\@[\\w]\.+[\\w]+[\\w]$") // Email validation check
var errs = 0
var msgbox = "You forgot the following question (s).\nPlease complete and re-submit. Thanks!\n";
var goon = msgbox
var ctr = 0;

var radioCk = false;
for (i = 0; i < document.frmSelect.Q1.length; i++) {
if (document.frmSelect.Q1[i].checked)
radioCk = true; }
if (!radioCk) {
msgbox = msgbox + "\n Question #1 - Please check one box";
}

if (document.frmSelect.Q3.value=="") {
msgbox = msgbox + "\n Question #3 - Please add your comments";
}

// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {

alert(msgbox);
return false;
}
}

---------------------
There is NO stupid question.

Old Pedant · December 11th, 2008, 06:39 PM

You have NO CODE AT ALL in there that would invoke any validation of any kind.

And the validation code you show seems to have nothing at all to do with the <FORM> that you show.

In fact, the JS code you show has two major functionalities code that are never used at all, no matter what.

Having said that: Even if you had proper validation code and a proper call to it, indeed calling submit() from the onChange even would bypass it.

dparsons · December 11th, 2008, 09:01 PM

To elaborate on what Pedant has said: by wiring up the onChange event of your SELECT box to submit the form, the form is automatically being sent back to the server thus bypassing any validation routines.

What you might do is something like this

JavaScript Code:

function DoSomthingForSelects()
{
     //Do Something
}

function ValidateForm()
{
   //Do validation routines
  return true;
}

HTML Code:

<head>
<title>Example combo box</title>
</head>
<form name="frmSelect" method="Post" action="selectcombo1.asp">
...
<SELECT name="cars" onChange="DoSomthingForSelects()">
...
<p><input name="Submit" type="submit" onClick="return ValidateForm()"  value="Submit"></p>

By calling a JavaScript method (instead of submitting the form onChange) you can do whatever it is you need to do in that method. When the user clicks the submit button your validation routines are called and the form is submitted.***

***If you validation routine were to fail your function should return false which will prevent the form from being submitted so something like this:

JavaScript Code:

function ValidateForm()
{
   if(SomeCondition == false) { return false; }
   if(SomeOtherCondition == false) { return false; }
  return true;
}

As with any post asking about JavaScript validation I need to make the comment that if you are going to go to the trouble to validate the data on the client side, you should also go to the trouble to validate the data on the server side since shutting of JavaScript in a browser is trivial.

hth.
Doug

Old Pedant · December 11th, 2008, 11:13 PM

As a very minor comment on Doug's code:

It's quite likely that don't really need his DoSomethingForSelects function, actually.

You can probably just code

Code:

<SELECT name="cars" onChange="if ( validateForm ) this.form.submit();">

dparsons · December 11th, 2008, 11:18 PM

Quite right. It will, however, depend on the desired functionality. Typically when I see someone posting a form based on the onChanged event of a SELECT box it is because they need some sort of data back from the server before the user can continue to the next step of the form. By using the DoSomething method you can integrate some AJAX (or other functionality as necessary) to continue normal operation of the form without needing to go back to the server.

-Doug