Google Answers Logo
View Question
 
Q: Javascript onsubmit form validation: ( Answered 5 out of 5 stars,   0 Comments )
Question  
Subject: Javascript onsubmit form validation:
Category: Computers > Programming
Asked by: knoxville_jeff-ga
List Price: $25.00		 Posted: 14 Mar 2004 09:17 PST
Expires: 13 Apr 2004 10:17 PDT
Question ID: 316595 
I am trying to create a form to submit one field to an email recipient
(test@test.com in the below code).  I am looking to have the act of
submitting be dependent on the choices the customer selects from pull
down menus on the same page.  That is to say if the customer answers
the questions according to the acceptable criteria their email address will be
submitted.  If they do not meet the criteria they will be sent
to a page saying sorry we can't help you (http://test/sorry.htm).
Otherwise if they do meet the criteria the email address field data
will be sent to test@test.com and the customer will be directed to the
confirmation page (http://test/thanks.htm).

I have set up the form, however I do not have the validation
javascript figured out.

The criteria to get submitted is all or nothing, any non acceptable
answer will give them the sorry page but to get submitted all drop
down questions must be one of the acceptable answers.

All questions must answered (the first choice is not acceptable in pull downs)
Question 1
  answer1= not acceptable
  answer2= acceptable

Question 2
  answer1= not acceptable
  answer2= acceptable

Question 3
  answer1= acceptable
  answer2= acceptable
  answer3= not acceptable
  answer4= not acceptable

Question 4
  answer1= acceptable
  answer2= acceptable
  answer3= acceptable
  answer4= not acceptable
  answer5= not acceptable

email address must be filled out.

Also if I am not already asking too much would it be possible to allow
the customer to only click the submit button once (in frontpage code)

Thanks for all of your help:

(what I have so far... sorry about frontpage code):

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<meta name="Microsoft Border" content="b, default">
</head>

<body>

<form method="POST" action="--WEBBOT-SELF--">
  <!--webbot bot="SaveResults" S-Label-Fields="TRUE"
U-File="/private/results.csv" S-Format="TEXT/CSV"
S-Email-Address="test@test.com" S-Email-Format="TEXT/PRE" --><table
border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="63%" id="AutoNumber7">
    <tr>
      <td width="69%" colspan="3">Question 1</td>
      <td width="31%"><select size="1" name="D1">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 2</td>
      <td width="31%"><select size="1" name="D2">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 3</td>
      <td width="31%"><select size="1" name="D3">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      <option>answer3</option>
      <option>answer4</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 4</td>
      <td width="31%"><select size="1" name="D4">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      <option>answer3</option>
      <option>answer4</option>
      <option>answer5</option>
      </select></td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">A</td>
      <td width="64%">Answer description 1</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">B</td>
      <td width="64%">Answer description 2</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">C</td>
      <td width="64%">Answer description 3</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">D</td>
      <td width="64%">Answer description 4</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">F</td>
      <td width="64%">Answer description 5</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">e-mail address: <input type="text" name="T1" size="20"></td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
  </table>
  <p><input type="submit" value="Submit" name="B1"></p>
</form>

</body>

</html>
Request for Question Clarification by hammer-ga on 14 Mar 2004 11:19 PST 
It's difficult to figure out how to answer your question. It's pretty
straightforward to check the values and either allow or prevent the
submit, but that does not appear to be what you want to do. It looks
like you always want to submit, but you want to land in a different
place depending on the results. Normally, this would be handled in the
form handler indicated by the form's action  attribute, but that
appears to be the webbot submitting to itself. I have no clue what to
pass to your webbot to cause it to take any particular action.

Can you clarify your requirements at all? 

- Hammer
Clarification of Question by knoxville_jeff-ga on 14 Mar 2004 12:07 PST 
Hammer,

I am only looking for the submit to occur if the customer meets the criteria.  

However if they do not meet the requirements I want them redirected to 
another page explaining why we are rejecting them (never being sent to
test@test.com)

To answer this question I am looking for the code to make make this form work.

Thanks,

Jeff
Clarification of Question by knoxville_jeff-ga on 14 Mar 2004 12:09 PST 
If it is not possible to have it direct to another page upon a not
acceptable answer.  Would it be possible to just alert that they don't
meet the requiremts?

Thanks again,

Jeff
Answer  
Subject: Re: Javascript onsubmit form validation:
Answered By: hammer-ga on 15 Mar 2004 07:30 PST
Rated:5 out of 5 stars		  
Jeff,

I tried everything I could think of to get your form to redirect on
fail without also submitting the form. Unfortunately, I was unable to
find a solution that would work on all browsers, while also handling
the Enter key, etc. The code below performs all your validations. It
provides a different error message when the user has not made all
selections, as opposed to making invalid selections. It should also
prevent multiple submission, in most cases.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<meta name="Microsoft Border" content="b, default">

<script language="Javascript">
<!--
function validateMe() {
var failed = false;

	if(document.my_form.submitted) return false;

	if((document.my_form.D1.selectedIndex == 0)
	|| (document.my_form.D2.selectedIndex == 0)
	|| (document.my_form.D3.selectedIndex == 0)
	|| (document.my_form.D4.selectedIndex == 0))
	{
		failed = true;
		alert('You must make a selection from each choice list.');
	}
	else
	{
		if((document.my_form.D1.selectedIndex == 1)
		|| (document.my_form.D2.selectedIndex == 1)
		|| (document.my_form.D3.selectedIndex == 3)
		|| (document.my_form.D3.selectedIndex == 4)
		|| (document.my_form.D4.selectedIndex == 4)
		|| (document.my_form.D4.selectedIndex == 5))
		{
			failed = true;
			alert('Sorry, we cannot help you.');
		}
	}

	if(failed)
		return false;
	else
		return true;
}
//-->
</script>

</head>

<body>

<form method="POST" name="my_form" onSubmit="return validateMe()"
action="--WEBBOT-SELF--">
  <!--webbot bot="SaveResults" S-Label-Fields="TRUE"
U-File="/private/results.csv" S-Format="TEXT/CSV"
S-Email-Address="test@test.com" S-Email-Format="TEXT/PRE" --><table
border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="63%" id="AutoNumber7">
    <tr>
      <td width="69%" colspan="3">Question 1</td>
      <td width="31%"><select size="1" name="D1">
      <option>- - - -</option>
      <option>answer1</option>

      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 2</td>
      <td width="31%"><select size="1" name="D2">
      <option>- - - -</option>

      <option>answer1</option>
      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 3</td>
      <td width="31%"><select size="1" name="D3">

      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      <option>answer3</option>
      <option>answer4</option>
      </select></td>

    </tr>
    <tr>
      <td width="69%" colspan="3">Question 4</td>
      <td width="31%"><select size="1" name="D4">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>

      <option>answer3</option>
      <option>answer4</option>
      <option>answer5</option>
      </select></td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>

      <td width="2%">A</td>
      <td width="64%">Answer description 1</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">B</td>

      <td width="64%">Answer description 2</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">C</td>
      <td width="64%">Answer description 3</td>

      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">D</td>
      <td width="64%">Answer description 4</td>
      <td width="31%">&nbsp;</td>
    </tr>

    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">F</td>
      <td width="64%">Answer description 5</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>

      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">e-mail address: <input type="text" name="T1" size="20"></td>

      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
  </table>

  <p><input type="submit" value="Submit" name="B1"></p>
</form>

</body>

</html>

Please ask for clarification if you need anything explained.

Resources:
IRT.org Javascript FAQ
http://developer.irt.org/script/script.htm

- Hammer
Request for Answer Clarification by knoxville_jeff-ga on 15 Mar 2004 09:52 PST 
how would i edit the code to make the email field required?
Clarification of Answer by hammer-ga on 15 Mar 2004 10:14 PST 
I'm sorry! I missed the email bit. This version includes a check to
make sure that an email address is filled in and that it is a valid
format for an email address.

- Hammer



<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<meta name="Microsoft Border" content="b, default">

<script language="Javascript">
<!--
function isEmail(string) {
    if (string.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
!= -1)
        return true;
    else
        return false;
}

function validateMe() {
var failed = false;

	if(document.my_form.submitted) return false;

	if(document.my_form.T1.value.length > 0)
	{
		if(isEmail(document.my_form.T1.value) == false)
		{
			alert("The Email Address is invalid.");
			return false;
		}
	}
	else
	{
		alert("An Email Address is required.");
		return false;
	}

	if((document.my_form.D1.selectedIndex == 0)
	|| (document.my_form.D2.selectedIndex == 0)
	|| (document.my_form.D3.selectedIndex == 0)
	|| (document.my_form.D4.selectedIndex == 0))
	{
		failed = true;
		alert('You must make a selection from each choice list.');
	}
	else
	{
		if((document.my_form.D1.selectedIndex == 1)
		|| (document.my_form.D2.selectedIndex == 1)
		|| (document.my_form.D3.selectedIndex == 3)
		|| (document.my_form.D3.selectedIndex == 4)
		|| (document.my_form.D4.selectedIndex == 4)
		|| (document.my_form.D4.selectedIndex == 5))
		{
			failed = true;
			alert('Sorry, we cannot help you.');
		}
	}

	if(failed)
		return false;
	else
		return true;
}
//-->
</script>

</head>

<body>

<form method="POST" name="my_form" onSubmit="return validateMe()"
action="--WEBBOT-SELF--">
  <!--webbot bot="SaveResults" S-Label-Fields="TRUE"
U-File="/private/results.csv" S-Format="TEXT/CSV"
S-Email-Address="test@test.com" S-Email-Format="TEXT/PRE" --><table
border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="63%" id="AutoNumber7">
    <tr>
      <td width="69%" colspan="3">Question 1</td>
      <td width="31%"><select size="1" name="D1">
      <option>- - - -</option>
      <option>answer1</option>

      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 2</td>
      <td width="31%"><select size="1" name="D2">
      <option>- - - -</option>

      <option>answer1</option>
      <option>answer2</option>
      </select></td>
    </tr>
    <tr>
      <td width="69%" colspan="3">Question 3</td>
      <td width="31%"><select size="1" name="D3">

      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>
      <option>answer3</option>
      <option>answer4</option>
      </select></td>

    </tr>
    <tr>
      <td width="69%" colspan="3">Question 4</td>
      <td width="31%"><select size="1" name="D4">
      <option>- - - -</option>
      <option>answer1</option>
      <option>answer2</option>

      <option>answer3</option>
      <option>answer4</option>
      <option>answer5</option>
      </select></td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>

      <td width="2%">A</td>
      <td width="64%">Answer description 1</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">B</td>

      <td width="64%">Answer description 2</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">C</td>
      <td width="64%">Answer description 3</td>

      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">D</td>
      <td width="64%">Answer description 4</td>
      <td width="31%">&nbsp;</td>
    </tr>

    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">F</td>
      <td width="64%">Answer description 5</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>

      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">e-mail address: <input type="text" name="T1" size="20"></td>

      <td width="31%">&nbsp;</td>
    </tr>
    <tr>
      <td width="3%">&nbsp;</td>
      <td width="2%">&nbsp;</td>
      <td width="64%">&nbsp;</td>
      <td width="31%">&nbsp;</td>
    </tr>
  </table>

  <p><input type="submit" value="Submit" name="B1"></p>
</form>

</body>

</html>
knoxville_jeff-ga rated this answer:5 out of 5 stars 
Thanks you are great!

Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy