show input tag for each selected dropdown with validation?

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

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

    <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" >

here’s my jquery code

            var optionValue = $(this).attr("value");
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{

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.


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.