• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 163
  • Last Modified:

Javascript form validation

I'm having an issue closing out this "simple" form validation script.
My form has a radio button that allows the user to choose phone or email as the way to contact them.  If they select email, but then don't enter an email address, i want to make the alert specific to that error.

It's not registereing.  When i run the code, the alert displays "undefined"... I can't seem to see what I'm doing wrong.  I've included the javascript and the form.

Any ideas would be appreciated!!!
function formCheck(){
		if (document.sendRequest.theName.value == "") {
			alert("Oops! Please enter a name!");
				document.sendRequest.theName.focus();
			return false;
		}
		
		if (document.sendRequest.theInfo.value == ""){
			alert(document.sendRequest.contactType.value);
			if (document.sendRequest.contactType.value == "email"){
			   alert("Oops!  Please enter an email address!");
			   document.sendRequest.theInfo.focus();
			} else {
			   alert("Oops!  Please enter a phone number!");
			   document.sendRequest.theInfo.focus();
			} 
			return false;
		}
		
	}

<form name="sendRequest" action="gethelp.asp" method="post" onSubmit="return formCheck()">
                                      <table border="0" cellspacing="0" style="color:#FFFFFF">
                                            	<tr>
                                                	<td width="99"><div align="left">Name:</div></td><td width="10"></td>
                                               	  <td width="165"><div align="left">
                                               	    <input type="text" id="theName" name="theName" />
                                           	      </div></td>
                                        </tr>
                                                <tr>
                                                	<td colspan="3"><div align="left">Contact me by:
                                               	      <input type="radio" name="contactType" value="phone" checked onClick="selCheck('Phone:');" />
                                               	      Phone&nbsp;&nbsp;&nbsp;
                                               	      <input type="radio" name="contactType" value="email" onClick="selCheck('Email:');"/>
                                           	        Email</div></td>
                                                </tr>
                          <tr>
                                                	<td><div align="left" id="conType">Phone:</div></td><td width="10"></td>
                               	<td><div align="left">
                               	  <input type="text" name="theInfo" />
                           	    </div></td>
                                                </tr>
                                                <tr>
                                                	<td colspan="3"><div align="left"><BR />
                                                	    <textarea cols="31" name="theProblem" id="theProblem" onFocus="clearText();">Briefly explain your issue.</textarea>
                                                    </div></td>
                                                </tr>
                                                
                          <tr>
                                                	<td colspan="3" style="padding-right:2px;"><div align="right">
                                                	  <input type="image" value="" src="images/save.jpg" />
                                                      
                                                	</div></td>
                                                </tr>
                                            </table>
                                            </form>

Open in new window

0
slightlyoff
Asked:
slightlyoff
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
Hello slightlyoff,

Replace line 9 and 10 :
                        alert(document.sendRequest.contactType.value);
                        if (document.sendRequest.contactType.value == "email"){

By :


var contactType_value = "";
			var contacttypes = document.getElementsByTagName("input");
			for(var i=0;i<contacttypes.length;i++) {
				try {
					if(contacttypes[i].type == "radio" && contacttypes[i].name == "contactType" && contacttypes[i].checked ) {
						contactType_value = contacttypes[i].value; 
					}
				}
				catch(e) {}
			}
			alert(contactType_value);
			if (contactType_value == "email"){

Open in new window

0
 
leakim971PluritechnicianCommented:
Full page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script language="javascript">
	function formCheck(){
		if (document.sendRequest.theName.value == "") {
			alert("Oops! Please enter a name!");
			document.sendRequest.theName.focus();
			return false;
		}
		if (document.sendRequest.theInfo.value == "") {
			contactType_value = "";
			var contacttypes = document.getElementsByTagName("input");
			for(var i=0;i<contacttypes.length;i++) {
				try {
					if(contacttypes[i].type == "radio" && contacttypes[i].name == "contactType" && contacttypes[i].checked ) {
						contactType_value = contacttypes[i].value; 
					}
				}
				catch(e) {}
			}
			alert(contactType_value);
			if (contactType_value == "email"){
				alert("Oops!  Please enter an email address!");
				document.sendRequest.theInfo.focus();
			} else {
				alert("Oops!  Please enter a phone number!");
				document.sendRequest.theInfo.focus();
			} 
			return false;
		}
	}
</script>
</head>
<body>
<form name="sendRequest" action="gethelp.asp" method="post" onSubmit="return formCheck()">
<table border="0" cellspacing="0" style="color:#FFFFFF">
    <tr>
    <td width="99"><div align="left">Name:</div></td><td width="10"></td>
        <td width="165">
            <div align="left">
            <input type="text" id="theName" name="theName" />
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        	<div align="left">Contact me by:
                <input type="radio" name="contactType" value="phone" checked onClick="selCheck('Phone:');" />
                Phone&nbsp;&nbsp;&nbsp;
                <input type="radio" name="contactType" value="email" onClick="selCheck('Email:');"/>
                Email
            </div>
        </td>
    </tr>
    <tr>
    <td><div align="left" id="conType">Phone:</div></td><td width="10"></td>
        <td>
            <div align="left">
                <input type="text" name="theInfo" />
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        	<div align="left"><BR />
            	<textarea cols="31" name="theProblem" id="theProblem" onFocus="clearText();">Briefly explain your issue.</textarea>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="padding-right:2px;">
            <div align="right">
               <input type="image" value="" src="images/save.jpg" />
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>

Open in new window

0
 
Gagan_JauraCommented:
As you are using document.formName.controlname, the email control will not be detected by javascript as it is not rendered on the page. I believe you should you document.getElementById() method to check if the email textbox is empty or not. Do the following modification and see if it works
change
if (document.sendRequest.theInfo.value == ""){
to
if (document.getElementByName("theInfo").value == ""){
or give an id to "theInfo" textbox, say, "theInfoId" and use
if (document.getElementById("theInfoId").value == ""){
0
 
slightlyoffAuthor Commented:
Thank you very much!

Not only did it work, but it was in a different way than I had thought about.

Something to add to my thought process for doing javascript, which I'm pretty new to.
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks a lot for the points! Have a good week!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now