title: How to validate two radio buttons, user should be to select any of the two radio button(Email or Phone)
body: <p>How to validate two radio buttons, the user should be able to select any of the two radio button(Email or Phone) then text box field will appear. if the user selects any one Radio button I want to validate field(Phone or Email) using Javascript.</p>
  <p>This is what I tried!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function validation() 
  {
  var em = document.getElementById("eid").value.indexOf("@");
  var ph = document.getElementById("ph").value;
  if(em==-1) 
  {  
  alert("E-mail ID is not valid");
  return false;
  }
  else if(ph==""||ph==null)
  {
  alert("Enter The Phone No");
  return false;
  }
  else if(isNaN(ph)||ph.length&gt;10||ph.length&lt;10)
  {
  alert("The mobile no. always has 10 digit numerical value");
  return false;
  }
  else{
  alert("Your Information is Submitted Successfully");
  }
  
  &lt;/script&gt;
  
           &lt;/tr&gt;
           &lt;/html&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;style&gt;
  #Phone:checked ~ .Phone
  {
  display:block;
  }
  #Email:checked ~ .Email
  {
  display:block;
  }
  &lt;/style&gt;
   
   &lt;tr&gt;
              &lt;td align="right"&gt;
                 &lt;label&gt;Email&lt;/label&gt;
              &lt;/td&gt;
              &lt;td align="left"&gt;
                 &lt;input type="radio" name="data" id="Email"&gt;
                 &lt;div class="Email" hidden&gt;
                   &lt;input type="text" id="eid" placeholder="Enter your Email" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td align="right"&gt;
                 &lt;label&gt;Phone&lt;/label&gt;
              &lt;/td&gt;
              &lt;td align="left"&gt;
                 &lt;input type="radio" name="data" id="Phone"&gt;
                 &lt;div class="Phone" hidden&gt;
                 &lt;input type="text" id="ph" minlength="1" maxlength="10" placeholder="Enter your phone number" /&gt;
                 &lt;/div&gt;
              &lt;/td&gt;
              &lt;input type='submit' name='submit' onclick="validation();" /&gt;
           &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>