show input tag for each selected dropdown with validation?

here’s my code for dropdown and input field’s

   <div>
        <select id="scl">
                <option value="10">Ten</option>
                <option value="7">Seven</option>
                <option value="4">Four</option>
         </select>
    </div>

<form>
    <div class="10 box" ><input type="number"  required></div>
    <div class="7 box" hidden><input type="numbe" required></div>
    <div class="4 box" hidden><input type="number" required></div>
      <input type="submit" >
 </form>

here’s my jquery code

<script>
$(document).ready(function(){
    $("#scl").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>

it does not submit my form.

it show’s and hide the input field for a specific drop down (i.e. if option 10 is selected it shows input field 10) but my problem is how can I remove validation from remaining two fields so that I can submit form

I need validation for selected field only.

any help is appreciated thanks in advance.

Answer

Maybe instead of adding “required” over here –

You can add “required” to the input field after this $(“.” + optionValue).show();

Use this line to add required prop to this field: $(“.” + optionValue).prop(‘required’,true);

And subsequently set the others as false.