Question

我有一个动态的表单，用户可以添加/删除表单输入。问题是在隐藏的form-group中，我无法添加属性required，因为在提交事件中，提交不会发生。

每次按+按钮时如何添加属性required并在按下按钮时将其删除？

我试过这个：$('#barcode').prop('required',true);但是不对，因为如果我按下2次+按钮，我将有2个具有相同ID的输入......

var counter = 0;

$('#form1')
  // Add button click handler
  .on('click', '.addButton', function() {
    counter++;
    var $template = $('#addLine'),
      $clone = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-index', counter)
      .insertBefore($template);

    // Update the name attributes
    $clone
      .find('[name="barcode"]').attr('name', 'barcode-' + counter).end()
      .find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end()
      .find('[name="packer"]').attr('name', 'packer-' + counter).end()
      .find('[name="count"]').attr('name', 'count-' + counter).end();

    $('#barcode').prop('required', true);
  })

// Remove button click handler
.on('click', '.removeButton', function() {
  var $row = $(this).parents('.form-group'),
    index = $row.attr('data-index');
  counter--;
  // Remove element containing the fields
  $('#barcode').prop('required', false);
  $row.remove();
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form">
      <fieldset>
        <div class="form-group">
          <label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
          <div class="col-md-3 col-sm-4">
            <input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/>
          </div>

          <label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
          <div class="col-md-1 col-sm-3">
            <input type="number" min="0" class="form-control" name="productsInBox" required/>
          </div>

          <div class="col-xs-1">
            <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
            </button>
          </div>
        </div>

        <div id="addLine" class="form-group hide">
          <label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
          <div class="col-md-3 col-sm-4">
            <input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" />
          </div>

          <label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
          <div class="col-md-1 col-sm-3">
            <input type="number" min="0" class="form-control" name="productsInBox" />
          </div>

          <div class="col-xs-1">
            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
            </button>
          </div>
        </div>



        <div class="form-group myTop">
          <div class="col-lg-10 ">
            <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Answer 1

我想念了问题。这个为+按钮

if($('#barcode').attr('required') != true){
       $('#barcode').attr('required',true);
    }

这个 - 按钮

if($('#barcode').attr('required')){
           $('#barcode').removeAttr('required');
        }

动态添加表单输入时添加必需属性

1 个答案: