Javascript Radio button that Toggles the Validation between to textbox

OddjobX · Nov 30, 2009

I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator

If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed.

I want to be able to do this without having to do a postback.

I already have the logic on the code behind and the enquiry object.

also I am fairly new to javascript so I have been using mostly jQuery as easier to implement

dkdude · Dec 2, 2009

I would use javascript to validate information (format) before submitting. Something like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>

  <title>Customer Registration Form</title>

  <script type="text/javascript">

    function validate() {

      var selected;

      if(document.getElementById('email').checked) {
        selected = 'email';
        /******
         ** here goes your javascript email validator:
         ** if(validate_email(document.getElementById('customerEmail').value))
         **   var ok = true;
         ** else
         **   var msg = 'Invalid email address - try again';
         ***/ 
      }

      if(document.getElementById('phone').checked) {
        selected = 'phone';
        /******
         ** here goes your javascript phone validator:
         ** if(validate_phone(document.getElementById('customerPhone').value))
         **   var ok = true;
         ** else
         **   var msg = 'Invalid phone number - try again';
         ***/ 
      }


      /******
       ** Let's check before submitting form data:
       ** Is information valid? Proceed
       ** if NOT : alert the user!
       ***/ 

      if(selected=='email'||selected=='phone') {
        if(ok)
          return true;
        else
          alert(msg);
      } else {
        alert('Please select either Email or Phone registration option before submitting. Thank you.');
        return false;
      }
    }

  </script>

</head>

<body>

  <h4>Select mandatory registration option</h4>

  <form action="handler.asp" method="post" onSubmit="return validate()">

    <input type="radio" name="validationOption" id="email" value="email" />
    Email :
    <input type="text" name="customerEmail" size="25" value="" />

    <br />

    <input type="radio" name="validationOption" id="phone" value="phone">
    Phone :
    <input type="text" name="customerPhone" size="25" />

    <br />

    <input type="submit" value="Register" />

  </form>

</body>

</html>

Hints for writing email and phone validation functions - googled some @

http://www.smartwebby.com/DHTML/phone_no_validation.asp

and

http://www.smartwebby.com/dhtml/email_validation.asp

Good luck ;-)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript Radio button that Toggles the Validation between to textbox

OddjobX

Programmer

dkdude

Programmer

Similar threads

Part and Inventory Search

Sponsor