Как показать модальное подтверждение перед тем, как пользователь перейдет на следующую вкладку?

Question

У меня есть раздел в моем приложении, который разработан с вкладками начальной загрузки 4. Есть шесть вкладок, и пять из них содержат формы с полями ввода. Исходный код представлял все данные (для всех 5 из 6 вкладок) одновременно. Мне это не нужно, так как пользователь может изменять данные только на одной вкладке, например. Чтобы повысить эффективность этого кода, я хотел бы иметь логику, которая позволит пользователям потерять данные и в то же время дать им возможность сохранить данные, прежде чем они покинут вкладку. Вот пример моего кода:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      <h4>Main Menu</h4>
      <ul class="nav nav-tabs card-header-tabs" id="agency_tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab_1">Section 1</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_2">Section 2</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_3">Section 3</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_4">Section 4</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_5">Section 5</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_6">Section 6</a></li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content">
        <div id="tab_1" class="tab-pane active">
          <div class="form-row">
            <div class="form-group col-6">
              <label class="font-weight-bold" for="fname">First Name:</label>
              <input class="form-control" type="text" name="fname" id="fname" value="" maxlength="30" placeholder="Please enter first name.">
            </div>
            <div class="form-group col-6">
              <label class="font-weight-bold" for="lname">Last Name:</label>
              <input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Please enter last name.">
            </div>
          </div>
          <div class="row">
            <div class="col-12 text-center m-3">
              <button type="button" name="save" class="btn btn-secondary save-data">Save</button>
              <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div id="tab_2" class="container tab-pane fade">
          <div class="form-group">
            <label class="font-weight-bold" for="phone">Phone Number:</label>
            <input class="form-control" type="text" name="phone" id="phone" value="" pattern="\d{3}-\d{3}-\d{4}" data-dispfld="The required format is: 000-000-0000" maxlength="12">
          </div>
          <div class="row">
            <div class="col-12 text-center m-3">
              <button type="button" name="save" class="btn btn-secondary save-data">Save</button>
              <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div id="tab_3" class="container tab-pane fade">
          <div class="form-group">
            <label class="font-weight-bold" for="email">Email:</label>
            <input class="form-control" type="email" name="email" id="email" value="" maxlength="40" required>
            <small class="form-text text-muted">This Email Address is used for login to your account.</small>
          </div>
          <div class="row">
            <div class="col-12 text-center m-3">
              <button type="button" name="save" class="btn btn-secondary save-data">Save</button>
              <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div id="tab_4" class="container tab-pane fade">
          <div class="form-group">
            <label class="font-weight-bold" for="title">Business Title:</label>
            <select class="custom-select browser-default" name="title" id="title" required>
              <option value="">--Select Title--</option>
              <option value="1">Manager</option>
              <option value="2">Secretary</option>
              <option value="3">Tester</option>
            </select>
          </div>
          <div class="row">
            <div class="col-12 text-center m-3">
              <button type="button" name="save" class="btn btn-secondary save-data">Save</button>
              <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div id="tab_5" class="container tab-pane fade">
          <div class="form-group">
            <label class="font-weight-bold" for="cname">Company Name:</label>
            <input class="form-control" type="text" name="cname" id="cname" value="" maxlength="120" placeholder="Please enter Company." required>
          </div>
          <div class="row">
            <div class="col-12 text-center m-3">
              <button type="button" name="save" class="btn btn-secondary save-data">Save</button>
              <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
            </div>
          </div>
        </div>
        <div id="tab_6" class="container tab-pane fade">
          This tab will display some general information. No input fields.
        </div>
      </div>
    </div>
  </div>
</div>

Первое, что мне было интересно, должен ли каждый раздел вкладок быть в отдельной форме или у меня должна быть одна форма для всех вкладок?

Во-вторых, еслипользователь вводит данные на вкладке 2, затем нажимает на вкладку 4, и в этот момент я должен показать предупреждение, в котором они получат сообщение типа «Хотите сохранить свои данные, прежде чем перейти на другую вкладку?»Затем две кнопки «Да» или «Продолжить». Если они нажимают «Да», данные должны быть сохранены, если не просто открыть следующую вкладку.

Есть ли способ добиться этого с помощью JQuery и Bootstrap 4?

Спасибо.

Answer 1

Я бы использовал одну форму, и если пользователь обновляет данные только на одной вкладке, я отправляю значения полей ввода этой вкладки на сервер.

Вот базовый пример, основанный на вашем коде, использующем sweetalert2 .

$(function() {
    $('#agency_tabs a[data-toggle="tab"]').click(function(e) {
        e.preventDefault();
        
        if (!$(this).hasClass('active') && isValid($('#agency_tabs a[data-toggle="tab"].active').data('group'))) {
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to save your data before you switch to different tab?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'Continue'
            }).then(confirm => {
                if (confirm.value) {
                    /* Save data here */

                    $(this).tab('show');
                }
            });
        }
        
        return false;
    });
    
    $('.save-data').click(function(e) {
        e.preventDefault();
        
        if (isValid($(this).data('group'))) {
            // Save data here
        }
    });
    
    const isValid = group => {
        let valid = true;
        
        $('[data-group="' + group + '"]:not(button):not(a)').each(function(index, item) {
            $(this).removeClass('is-invalid');
            if (!this.checkValidity()) {
                $(this).addClass('is-invalid');
                valid = false;
            }
        });
        
        return valid;
    };
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      <h4>Main Menu</h4>
      <ul class="nav nav-tabs card-header-tabs" id="agency_tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab_1" data-group="section-1">Section 1</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_2" data-group="section-2">Section 2</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_3">Section 3</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_4">Section 4</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_5">Section 5</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_6">Section 6</a></li>
      </ul>
    </div>
    <div class="card-body">
      <form action="#" method="post" novalidate>
        <div class="tab-content">
          <div id="tab_1" class="tab-pane active">
            <div class="form-row">
              <div class="form-group col-6">
                <label class="font-weight-bold" for="fname">First Name:</label>
                <input class="form-control" type="text" name="fname" id="fname" value="" maxlength="30" placeholder="Please enter first name." data-group="section-1" required>
              </div>
              <div class="form-group col-6">
                <label class="font-weight-bold" for="lname">Last Name:</label>
                <input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Please enter last name." data-group="section-1" required>
              </div>
            </div>
            <div class="row">
              <div class="col-12 text-center m-3">
                <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-1">Save</button>
                <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
              </div>
            </div>
          </div>
          <div id="tab_2" class="container tab-pane fade">
            <div class="form-group">
              <label class="font-weight-bold" for="phone">Phone Number:</label>
              <input class="form-control" type="text" name="phone" id="phone" value="" pattern="\d{3}-\d{3}-\d{4}" data-dispfld="The required format is: 000-000-0000" maxlength="12" data-group="section-2" required>
            </div>
            <div class="row">
              <div class="col-12 text-center m-3">
                <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-2">Save</button>
                <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
              </div>
            </div>
          </div>
          <div id="tab_3" class="container tab-pane fade">
            <div class="form-group">
              <label class="font-weight-bold" for="email">Email:</label>
              <input class="form-control" type="email" name="email" id="email" value="" maxlength="40" data-group="section-3" required>
              <small class="form-text text-muted">This Email Address is used for login to your account.</small>
            </div>
            <div class="row">
              <div class="col-12 text-center m-3">
                <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-3">Save</button>
                <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
              </div>
            </div>
          </div>
          <div id="tab_4" class="container tab-pane fade">
            <div class="form-group">
              <label class="font-weight-bold" for="title">Business Title:</label>
              <select class="custom-select browser-default" name="title" id="title" data-group="section-4">
                <option value="">--Select Title--</option>
                <option value="1">Manager</option>
                <option value="2">Secretary</option>
                <option value="3">Tester</option>
              </select>
            </div>
            <div class="row">
              <div class="col-12 text-center m-3">
                <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-4">Save</button>
                <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
              </div>
            </div>
          </div>
          <div id="tab_5" class="container tab-pane fade">
            <div class="form-group">
              <label class="font-weight-bold" for="cname">Company Name:</label>
              <input class="form-control" type="text" name="cname" id="cname" value="" maxlength="120" placeholder="Please enter Company." data-group="section-5" required>
            </div>
            <div class="row">
              <div class="col-12 text-center m-3">
                <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-5">Save</button>
                <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button>
              </div>
            </div>
          </div>
          <div id="tab_6" class="container tab-pane fade">
            This tab will display some general information. No input fields.
          </div>
        </div>
      </form>
    </div>
  </div>
</div>