Attributes required not working on cloned elements

Question

I have some elements with the required attribute and I wrote a jQuery code to clone this element. When I press submit, it should show a message indicating to fill the inputs, but it doesn't work on the cloned elements...

<div class='col-md-12'>
  <div class='box box-primary'>
    <div class='box-header with-border'>
      <h3 class='box-title'>Information of Person</h3>
    </div>

    <div class='form-group'>
      <div class='box-body rowClone2'>

        <div class='row rowClone'>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
          <div class='col-xs-6 col-md-3' >
            <input type="tel" class="form-control">
          </div>
          <div class='col-xs-6 col-md-3'>
            <input type="text" class="form-control" required>
          </div>
        </div>
        <br>

      </div>
      <div class="row">
        <div class="col-md-3">
          <input type="submit" value="Submit" formnovalidate>                  
        </div>
      </div>
    </div>

Answer 1

I'm not sure if that is your entire HTML, but you may be missing your form that wraps that block of HTML. This code works for me whether the input was there on page load, or cloned using the button I added.

I'm guessing the problem lies with your form tag, whether it's missing or malformed.

 $(function() { $(document).on('click', '.cloneLastInput', function() { var clone = $('.form-control:last').closest('div').clone(); $('.rowClone').append(clone); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="post"> <button type="button" class="cloneLastInput">clone last input</button> <div class='col-md-12'> <div class='box box-primary'> <div class='box-header with-border'> <h3 class='box-title'>Information of Person</h3> </div> <div class='form-group'> <div class='box-body rowClone2'> <div class='row rowClone'> <div class='col-xs-6 col-md-3'> <input type="text" class="form-control" required="required"> </div> <div class='col-xs-6 col-md-3'> <input type="text" class="form-control" required> </div> <div class='col-xs-6 col-md-3'> <input type="tel" class="form-control"> </div> <div class='col-xs-6 col-md-3'> <input type="text" class="form-control" required> </div> </div> <br> </div> <div class="row"> <div class="col-md-3"> <input type="submit" value="Submit"> </div> </div> </div> </div> </div> </form>

Answer 2

I solve by make loop via jquery add new id or name for each new clone for ex:-

 var num =4; var count = $('#c3').val(); for(i = 1 ; count>i ; i++){ var clone = $('.rowClone:first').clone(); $('.rowClone2').append(clone,'<br>') } $('.rowClone').not(':first').find('input').each(function(){ num++ $(this).prop('name','info'+num); $(this).prop('required'); });