仅在追加时聚焦输入

Question

我已经在我的表单中输入了日期选择器，我将其设置为隐藏。它会随着单选按钮的变化而显示。我还默认设置了 .input-datepicker 焦点，这样我仍然可以在单击输入按钮时打开日期选择器。

这里的问题是，当我想在 SET BY DAY 无线电处于活动状态并且所有 datepicker 输入设置为隐藏时提交表单时，我的表单将抛出如下错误：

An invalid form control with name='start_date[]' is not focusable.

如何仅在日期选择器输入显示时聚焦它？

function toggleDutySetting(type){
    if(type === 'day'){ 
        $('#show_date').hide();
        $('#working_hours_append').html('');
        $('.add-working-days').parent().hide();
    } else if(type === 'date'){
        $('#show_date').show();
        $('.add-working-days').parent().show();
    }
}

function addWorkingHours(){
    $('#working_hours_append').append(`
        <div class="input-group date input-datepicker" style="margin-top: 15px;">
            <input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        </div>
    `);
}

$(document).ready(function(){
    $('body').on('focus',".input-datepicker ", function(){
        $(this).datepicker({ format: 'dd-mm-yyyy' });
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpAxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
</head>
<body>

<div class="form-group">
    <label class="radio-inline">
        <input type="radio" onchange="toggleDutySetting('day')" name="type" value="day" checked>SET BY DAY
    </label>
    <label class="radio-inline">
        <input type="radio" onchange="toggleDutySetting('date')" name="type" value="rotation">SET BY ROTATION
    </label>
</div>

<div class="form-group">
    <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="MONDAY">Monday</label>
    </div>
    <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="TUESDAY">Tuesday</label>
    </div>
</div>

<div class="form-group" id="show_date" style="display: none;">
    <div class="input-group date input-datepicker">
        <input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
    </div>
</div>

<div class="form-group" id="working_hours_append"></div>

<div class="text-right margin-top" style="display: none;">
    <a href="javascript:;" onclick="addWorkingHours()" class="bold add-working-days"><i class="fa fa-plus"></i>&nbsp; WORKING DAYS</a>
</div>

</body>
</html>

Answer 1

您需要将 prop 设置为 false 当您 select 天并且当它的轮换设置为 true 以确保 fields 得到已验证。

我还使用 data-attributes 在所有新附加的 inputs 上添加了 focus 以确保您仍然可以使用 names[] 将数据发送到您的 backend.

使用 find 方法我们只能 target 我们需要的 inputs 使用它们的 data-attributes 和每个新添加的输入的 counter。一旦您点击 add Working day，输入将是 focused 本身，您可以 select 日期。

如果您select按天设置，您的表单将按要求正常提交，没有错误。如果您 select 旋转设置 所有字段都将使用 form-control 和 required 属性进行验证。

现场工作演示：

//Toggle settings
function toggleDutySetting(type) {
  if (type === 'day') {
    $('#show_date').hide()
    $('#working_hours_append').html('');
    $('.add-working-days').parent().hide();
    $('#show_date').find('input[data-id="0"').prop('required', false).blur() //remove focus
  } else if (type === 'date') {
    $('#show_date').show().prop('required', true)
    $('.add-working-days').parent().show();
    $('#show_date').find('input[data-id="0"').prop('required', true).focus() //set to focus on rotation
  }
}

//Focus counter
var counter = 1

//Add inputs
function addWorkingHours() {
  $('#working_hours_append').append(`
        <div class="input-group date input-datepicker" style="margin-top: 15px;">
            <input type="text" data-id="` + counter + `" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
        </div>
    `);
  //Focus only after its appended
  $('#working_hours_append').find('input[data-id="' + counter + '"]').focus()
  counter++
}

$(document).ready(function() {
  $('body').on('focus', ".input-datepicker ", function() {
    $(this).datepicker({
      format: 'dd-mm-yyyy',
      autoclose: true
    });
  })
})

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpAxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
</head>

<body>

  <form>
    <div class="form-group">
      <label class="radio-inline">
            <input type="radio" onchange="toggleDutySetting('day')" name="type" value="day" checked>SET BY DAY
        </label>
      <label class="radio-inline">
            <input type="radio" onchange="toggleDutySetting('date')" name="type" value="rotation">SET BY ROTATION
        </label>
    </div>

    <div class="form-group">
      <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="MONDAY">Monday</label>
      </div>
      <div class="checkbox marginless-top">
        <label><input name="weekday[]" type="checkbox" value="TUESDAY">Tuesday</label>
      </div>
    </div>

    <div class="form-group" id="show_date" style="display: none;">
      <div class="input-group date input-datepicker">
        <input type="text" data-id="0" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY">
        <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
      </div>
    </div>

    <div class="form-group" id="working_hours_append"></div>

    <div class="text-right margin-top" style="display: none;">
      <a href="javascript:;" onclick="addWorkingHours()" class="bold add-working-days"><i class="fa fa-plus"></i>&nbsp; WORKING DAYS</a>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

</body>

</html>

仅在追加时聚焦输入

Focus input only when it get appended

html

javascript

jquery

bootstrap-datepicker