By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,010 Members | 2,774 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,010 IT Pros & Developers. It's quick & easy.

Validation of text field upon radio button selection

P: 2
Hey Guys,

Please could anyone help me out with the following form I need to create a validation on the email field only if the user checked the radio button named Email.

Thanks in advance.


[HTML]<form action="" method="get">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="textfield" id="textfield" />
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td>Contact Method:</td>
<td>
<input type="radio" name="radio" id="radio" value="radio" /> Phone <input type="radio" name="radio" id="radio" value="radio" />
Email
</td>
</tr>
<tr>
<td>Type of Inquiry:</td>
<td><label><select name="select" id="select" >
<option selected="selected">Question</option>
<option >Comment</option>
</select></label></td>
</tr>
<tr>
<td>Content:</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</table>
<input name="Submit" type="button" value="Submit Form" />
</div></form>[/HTML]
Sep 17 '08 #1
Share this Question
Share on Google+
4 Replies


stepterr
100+
P: 157
Hey Guys,

Please could anyone help me out with the following form I need to create a validation on the email field only if the user checked the radio button named Email.

Thanks in advance.


<form action="" method="get">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="textfield" id="textfield" />
</td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td>Contact Method:</td>
<td>
<input type="radio" name="radio" id="radio" value="radio" /> Phone <input type="radio" name="radio" id="radio" value="radio" />
Email
</td>
</tr>
<tr>
<td>Type of Inquiry:</td>
<td><label><select name="select" id="select" >
<option selected="selected">Question</option>
<option >Comment</option>
</select></label></td>
</tr>
<tr>
<td>Content:</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
</table>
<input name="Submit" type="button" value="Submit Form" />
</div></form>

pureadrenaline,
First thing you will need to do is set the value of the radio button to something unique so that you can tell if they selected "phone" or "email". Currently you have the value for both of them set to "radio".

Now, to get the value of the radio button you'll need to iterate through all the radio buttons in that set, those that have the same name, and then get the value from the one that is checked.

Here's an example of this:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript>
  2. <!--
  3.  
  4. function get_radio_value()
  5. {
  6. for (var i=0; i < document.formname.radio.length; i++)
  7.    {
  8.    if (document.formname.radio[i].checked)
  9.       {
  10.       var rad_val = document.formname.radio[i].value;
  11.       }
  12.    }
  13. }
  14.  
  15. //-->
  16. </script>
Now you can check what rad_val is equal to and if it is "email" then you can do your email validation.
Sep 17 '08 #2

P: 2
ok, Could you please give me the whole code of the page?

Thanks a lot.
Sep 17 '08 #3

stepterr
100+
P: 157
ok, Could you please give me the whole code of the page?

Thanks a lot.
Here's an example to get you started. You can expand upon it further. In the example I've changed the field names as I find it helpful to name them something meaningful, especially if you will be doing validation on them.

The form (only with the fields in question for this example):
Expand|Select|Wrap|Line Numbers
  1. <form name="contactform" method="post">
  2. <table border="0" cellspacing="0" cellpadding="0" align="center">
  3.     <tr>
  4.         <td>Phone Number:</td>
  5.         <td><input type="text" name="Phone" id="Phone" /></td>
  6.     </tr>
  7.     <tr>
  8.         <td>E-mail Address:</td>
  9.         <td><input type="text" name="Email" id="Email" /></td>
  10.     </tr>
  11.     <tr>
  12.         <td>Contact Method:</td>
  13.         <td>
  14.         <input type="radio" name="Method" id="Method" value="Phone" />Phone 
  15.         <input type="radio" name="Method" id="Method" value="Email" />Email 
  16.         </td>
  17.     </tr>
  18. </table>
  19. <input name="Submit" type="button" value="Submit Form" onclick="get_radio_value()" />
  20. </form>

The javascript:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. var f=document.contactform;
  4.  
  5. function get_radio_value()
  6. {
  7.    for (var i=0; i < f.Method.length; i++)
  8.    {
  9.       if (f.Method[i].checked)
  10.       {
  11.           var rad_val = f.Method[i].value;
  12.            if(rad_val == "Email")
  13.          {
  14.              if(bad_email(f.Email.value))
  15.              {
  16.                 alert("Sorry, You entered an invalid email address.");
  17.                 f.Email.focus();
  18.                 return false;
  19.             }
  20.          }
  21.       }
  22.    }
  23. }
  24.  
  25. function bad_email(emailaddr)
  26. {
  27.     var emailFilter=/^.+@.+\..{2,3}$/;
  28.     if (!(emailFilter.test(emailaddr)))
  29.     {
  30.            return true;
  31.     }
  32.     var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
  33.     if (emailaddr.match(illegalChars))
  34.     {
  35.           return true;
  36.     }
  37.     return false;
  38. }
  39. </script>
This is just a basic example and it's only doing the validation for you at this point. Don't forget that once your validation passes, you'll actually want this form to submit to something, at least I'm assuming you would. :-)
Sep 17 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Note that IDs must be unique. If it's the email button you want, give it a unique ID, e.g. "email", and then access using document.getElementById().

PS. please use code tags when posting code.
Sep 18 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.