提交时未输入字段时如何自动滚动到表单区域

Question

我想提交一个表单，但是当没有输入该字段时，它应该自动指向那个区域。我有单选按钮。当它没有被点击时，它应该自动滚动到单选按钮区域。当我执行我的代码时，它不会自动滚动到单选按钮，但文本字段会自动滚动。

每当我尝试提交表单时，它都不是自动滚动的，它只显示错误 condition.How 以解决此问题

$('.sellingFormSave').submit(function(e) {
  //e.preventDefault();
  $('.form_error').remove();
  var count = 0;
  if (!$('[name=condition]:checked').val()) {
    $('.condition_radio .wrapper').after('<label class="form_error" style="color:red">Select the condition of the trucks.</label>');
    count++;
  }
  if ($('[name=product_id]').val() == '') {

    var qty = 0;

    if (count > 0) {
      $('[type=submit]').attr('disabled', false);
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="POST" action="/sellingFormSave" enctype="multipart/form-data" class="sellingFormSave" id="sellingFormSave">

  <div class="row">
    <div class="form-group col-md-12 condition_radio">
      <div class="wrapper">
        <span>Condition of the Trucks</span>
        <div class="toggle_radio">
          <input type="radio" class="toggle_option" id="as_is" value="as_is" name="condition" {{product.condition=='as_is' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
          <input type="radio" class="toggle_option" id="dot_term" value="dot" name="condition" {{product.condition=='dot' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
          <input type="radio" class="toggle_option" id="trade_term" value="trade" name="condition" {{product.condition=='trade' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>

          <label for="as_is"><p>As Is - Where Is</p></label>
          <label for="dot_term"><p>DOT Term</p></label>
          <label for="trade_term"><p>Trade Term</p></label>
          <div class="toggle_option_slider">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group col-md-12">
      <div class="field__input-wrapper">
        <input type="text" class="field__input" placeholder="Name *" name="name" value="{{product.name}}" {{product !='' ? 'disabled' : 'required'}}>
      </div>
    </div>
    <div class="form-group col-md-4">
      <div class="field__input-wrapper">
        <input type="text" class="field__input" placeholder="City *" name="city" value="{{product.city}}" {{product !='' ? 'disabled' : 'required'}}>
      </div>
    </div>
    <div class="form-group col-md-12">
      <div class="field__input-wrapper field_input__confirm">
        <input type="checkbox" id="confirm" name="confirm[]" value="yes" {{product.confirm !='' ? 'checked' : ''}} {{product !='' ? 'disabled' : 'required'}}>
        <label for="confirm"> I certify that the above facts are true to the best of my knowledge and belief.</label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn">
                                                Save
                                            </button>

</form>

<div class="modal fade bd-example-modal-lg" id="dot_termModal" tabindex="-1" role="dialog" aria-labelledby="dot_termModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>DOT Term</h5>
        <p>sdgfd fdgdfb dfhfdb vchrt </p>
      </div>
    </div>
  </div>
</div>
<!-- dot_term modal -->

<!-- trade_term modal -->
<div class="modal fade bd-example-modal-lg" id="trade_termModal" tabindex="-1" role="dialog" aria-labelledby="trade_termModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>Trade Term</h5>
        <p>xgsd dfhdfjhfdb dhetdjn</p>
      </div>
    </div>
  </div>
</div>
<!-- trade_term modal -->

<!-- as_is modal -->
<div class="modal fade bd-example-modal-lg" id="as_isModal" tabindex="-1" role="dialog" aria-labelledby="as_isModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>As Is - Where Is</h5>
        <p>dfhfdh fdhdfjd.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您没有名为 product_id
如果选中无线电，则忽略其他字段。由于收音机是必需的，您不能为“名称”或“城市”字段触发任何错误，因为浏览器不会让您在不选择收音机的情况下提交
什么是product_name以及为什么不使用它就将数量设置为0。

这是一个演示。我按下保存按钮，这样您就可以看到浏览器将关注空名称。

下次请让代码匹配 HTML

$('#sellingFormSave').on("submit", function(e) {
  $('.form_error').remove();
  if (!$('[name=condition]:checked').val()) {
    $('.condition_radio .wrapper').after('<label class="form_error" style="color:red">Select the condition of the trucks.</label>');
  }
  if ($('[name=name]').val() == '') {
    e.preventDefault()
    $('[name=name]').focus();
  }
});

#dummy { margin-bottom: 1000px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="POST" action="/sellingFormSave" enctype="multipart/form-data" class="sellingFormSave" id="sellingFormSave">

  <div class="row">
    <div class="form-group col-md-12 condition_radio">
      <div class="wrapper">
        <span>Condition of the Trucks</span>
        <div class="toggle_radio">
          <input type="radio" class="toggle_option" id="as_is" value="as_is" name="condition" {{product.condition=='as_is' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
          <input type="radio" class="toggle_option" id="dot_term" value="dot" name="condition" {{product.condition=='dot' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
          <input type="radio" class="toggle_option" id="trade_term" value="trade" name="condition" {{product.condition=='trade' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>

          <label for="as_is"><p>As Is - Where Is</p></label>
          <label for="dot_term"><p>DOT Term</p></label>
          <label for="trade_term"><p>Trade Term</p></label>
          <div class="toggle_option_slider">
          </div>
        </div>
      </div>
    </div>

    <div class="form-group col-md-12">
      <div class="field__input-wrapper">
        <input type="text" class="field__input" placeholder="Name *" name="name" value="" {{product !='' ? 'disabled' : 'required'}}>
      </div>
    </div>
    <div class="form-group col-md-4">
      <div class="field__input-wrapper">
        <input type="text" class="field__input" placeholder="City *" name="city" value="" {{product !='' ? 'disabled' : 'required'}}>
      </div>
    </div>
    <div class="form-group col-md-12">
      <div class="field__input-wrapper field_input__confirm">
        <input type="checkbox" id="confirm" name="confirm[]" value="yes" {{product.confirm !='' ? 'checked' : ''}} {{product !='' ? 'disabled' : 'required'}}>
        <label for="confirm"> I certify that the above facts are true to the best of my knowledge and belief.</label>
      </div>
    </div>
  </div>
      <hr id="dummy" />
  <button type="submit" class="btn">Save</button>

</form>

<div class="modal fade bd-example-modal-lg" id="dot_termModal" tabindex="-1" role="dialog" aria-labelledby="dot_termModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>DOT Term</h5>
        <p>sdgfd fdgdfb dfhfdb vchrt </p>
      </div>
    </div>
  </div>
</div>
<!-- dot_term modal -->

<!-- trade_term modal -->
<div class="modal fade bd-example-modal-lg" id="trade_termModal" tabindex="-1" role="dialog" aria-labelledby="trade_termModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>Trade Term</h5>
        <p>xgsd dfhdfjhfdb dhetdjn</p>
      </div>
    </div>
  </div>
</div>
<!-- trade_term modal -->

<!-- as_is modal -->
<div class="modal fade bd-example-modal-lg" id="as_isModal" tabindex="-1" role="dialog" aria-labelledby="as_isModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5>As Is - Where Is</h5>
        <p>dfhfdh fdhdfjd.</p>
      </div>
    </div>
  </div>
</div>

提交时未输入字段时如何自动滚动到表单区域

How to autoscroll to the form area when a field is not entered while submitting

html

forms

jquery

radio-button

autoscroll