CODEWITHSUNDEEP
javascriptjqueryhtml
Newbie Coder and Learner
Newbie Coder and Learner

Reputation: 17

javascript validation if a radio selected then make a dropdown required

I have a radio field in my form that has 3 elements. color, sleeve, size

based on the radio selection I do a show/hide of 3 select boxes. select- color-type red, blue, green etc, etc select - sleeve-type full sleeve, half sleeve, sleeveless select - size-type small, medium, large, extra large how can I make the select field mandatory if one of the related radio is selected example: if color radio is selected then drop-down color-type is a required field, else if, radio sleeve is selected then drop-down sleeve-type is selected and so on.

 <script type="text/javascript">
  function showLayer(layerName)
  {
    document.getElementById(layerName).style.display="block";
  }
  function hideLayer(layerName)
  {

  document.getElementById(layerName).style.display="none";
  }
</script>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1'); hideLayer('hlayer2'); hideLayer('hlayer3');" required>Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2'); hideLayer('hlayer1'); hideLayer('hlayer3');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3'); hideLayer('hlayer2'); hideLayer('hlayer1');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

Upvotes: 0

Views: 179

Answers (1)

danny bee
danny bee

Reputation: 870

There are a few ways to accomplish this. You can get the immediate child of the div you are setting the style.display attribute and set that child as required. At the moment the first child is your select input, keep in mind this may cause trouble in the future if you decide to add more elements.

If you want a more robust way to go around I would add another parameter to your showLayer() and hideLayer() functions representing the ID of the select field you want to make required and get these elements directly.

Working Example:

function showLayer(layerName, myField)
  {
    document.getElementById(layerName).style.display="block";
    
    //set the appropriate field as required
    document.getElementById(myField).required = true;
  }
  function hideLayer(layerName, myField)
  {

  document.getElementById(layerName).style.display="none";
  //set fields as not required
  document.getElementById(myField).required = false;
  }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>

<form method="post" action="" name="rregister" id="rregister">

    <div>
      <label><input type="radio"  name="ctype" id="color" value="color" onclick="showLayer('hlayer1', 'colortype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer3', 'sizetype');">Color</label>
      <label><input type="radio" name="ctype" id="sleeve" value="sleeve" onclick="showLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype'); hideLayer('hlayer3', 'sizetype');">Sleeve</label>
      <label><input type="radio" name="ctype" id="size" value="size" onclick="showLayer('hlayer3', 'sizetype'); hideLayer('hlayer2', 'sleevetype'); hideLayer('hlayer1', 'colortype');">Size</label>
    </div>

    <div id="hlayer1" style="display: none;">
      <select id="colortype" name="colortype">
        <option value="" selected="selected">Color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
      </select>
    </div>

    <div id="hlayer2" style="display: none;">
      <select id="sleevetype" name="sleevetype">
        <option value="" selected="selected">Sleeve </option>
        <option value="Half">Half</option>
        <option value="Full">Full</option>
        <option value="Sleeveless">Sleeveless</option>
      </select>
    </div>

    <div id="hlayer3" style="display: none;">
      <select id="sizetype" name="sizetype">
        <option value="" selected="selected">Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="XL">Xtra Large</option>
      </select>
    </div>

    <div>
      <input type="submit" name="submit"  id="submit" value="Submit" />
    </div>
</form>

</body>
</html>

Notice that I added the appropriate input ID as arguments in your HTML

Upvotes: 0

Related Questions