Validation of text field upon radio button selection

[pureadrenaline]

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]

[stepterr]

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:

<script type="text/javascript>
<!--
 
function get_radio_value()
{
for (var i=0; i < document.formname.radio.length; i++)
   {
   if (document.formname.radio[i].checked)
      {
      var rad_val = document.formname.radio[i].value;
      }
   }
}
 
//-->
</script>

Now you can check what rad_val is equal to and if it is "email" then you can do your email validation.

[pureadrenaline]

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

Thanks a lot.

[stepterr]

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):

<form name="contactform" method="post">
<table border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>Phone Number:</td>
        <td><input type="text" name="Phone" id="Phone" /></td>
    </tr>
    <tr>
        <td>E-mail Address:</td>
        <td><input type="text" name="Email" id="Email" /></td>
    </tr>
    <tr>
        <td>Contact Method:</td>
        <td>
        <input type="radio" name="Method" id="Method" value="Phone" />Phone 
        <input type="radio" name="Method" id="Method" value="Email" />Email 
        </td>
    </tr>
</table>
<input name="Submit" type="button" value="Submit Form" onclick="get_radio_value()" />
</form>

The javascript:

<script language="javascript">
 
var f=document.contactform;
 
function get_radio_value()
{
   for (var i=0; i < f.Method.length; i++)
   {
      if (f.Method[i].checked)
      {
          var rad_val = f.Method[i].value;
           if(rad_val == "Email")
         {
             if(bad_email(f.Email.value))
             {
                alert("Sorry, You entered an invalid email address.");
                f.Email.focus();
                return false;
            }
         }
      }
   }
}
 
function bad_email(emailaddr)
{
    var emailFilter=/^.+@.+\..{2,3}$/;
    if (!(emailFilter.test(emailaddr)))
    {
           return true;
    }
    var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
    if (emailaddr.match(illegalChars))
    {
          return true;
    }
    return false;
}
</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. :-)

[acoder]

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.