select option with additional form: hide unwanted input fields and show the wanted ones as required-CodePudding

Below is part of my code. Idea is you pick one option and it's input fields are marked as required, while options that are not picked are hidden.

I would like the displayed additional input field to be marked by the js script as "required", like input fields in --MAIN FORM-- I suppose it needs only one additional line of code added to script, but no idea how to do it. I am just a beginner. I believe it needs additional line like this one: $("." formClass).slideDown('medium'); with pointing to all displayed inputs and .attr('required', true); but I've no idea how to do it. Any help will be appreciated :-) Thanks and have a nice Sunday

Here's part of html code and js code:

$('#productType').on('change', function() {
  var formClass = $(this).val();
  $(".op").hide();
  $("."   formClass).slideDown('medium');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">

  <label for="sku">SKU</label>
  <input type="text" id="sku" name="sku" required><br>

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required><br>

  <label for="price">Price ($)</label>
  <input type="number" id="price" name="price" required><br>

  <label for="productType" id="switcher">Product type</label>
  <select name="productType" id="productType" required>
    <option value="" selected disabled>Product type</option>
    <option id="dvd" value="dvd">DVD</option>
    <option id="book" value="book">Book</option>
    <option id="furniture" value="furniture">Furniture</option>
  </select>


  <!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
  <div  id="dvd-form">
    <p>Please provide size in MB</p>
    <label for="size">Size (MB)</label>
    <input type="number" id="size" name="size">
  </div>

  <div  id="book-form">
    <p>Please provide weight in KG</p>
    <label for="weight">Weight (KG)</label>
    <input type="number" id="weight" name="weight">

  </div>
  <div  id="furniture-form">
    <p>Please provide dimensions in CM</p>
    <label for="height">Height (CM)</label>
    <input type="number" id="height" name="height"><br>
    <label for="width">Width (CM)</label>
    <input type="number" id="width" name="width"><br>
    <label for="length">Length (CM)</label>
    <input type="number" id="length" name="length">
  </div>
</form>

CodePudding user response：

Remove the required attribute from all the inputs inside the elements being hidden, and add it to the ones being shown with .slideDown().

$('#productType').on('change', function() {
  var formClass = $(this).val();
  $(".op").hide().find(':input').removeAttr('required');
  $("."   formClass).slideDown('medium').find(':input').attr('required', true);;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">

  <label for="sku">SKU</label>
  <input type="text" id="sku" name="sku" required><br>

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required><br>

  <label for="price">Price ($)</label>
  <input type="number" id="price" name="price" required><br>

  <label for="productType" id="switcher">Product type</label>
  <select name="productType" id="productType" required>
    <option value="" selected disabled>Product type</option>
    <option id="dvd" value="dvd">DVD</option>
    <option id="book" value="book">Book</option>
    <option id="furniture" value="furniture">Furniture</option>
  </select>


  <!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
  <div  id="dvd-form">
    <p>Please provide size in MB</p>
    <label for="size">Size (MB)</label>
    <input type="number" id="size" name="size">
  </div>

  <div  id="book-form">
    <p>Please provide weight in KG</p>
    <label for="weight">Weight (KG)</label>
    <input type="number" id="weight" name="weight">

  </div>
  <div  id="furniture-form">
    <p>Please provide dimensions in CM</p>
    <label for="height">Height (CM)</label>
    <input type="number" id="height" name="height"><br>
    <label for="width">Width (CM)</label>
    <input type="number" id="width" name="width"><br>
    <label for="length">Length (CM)</label>
    <input type="number" id="length" name="length">
  </div>
</form>