Q:

How to show confirm modal before user moves to next tab?

I have section in my application that is designed with bootstrap 4 tabs. There are six tabs and five of them are containing form's with input fields. The original code was submitting all data (for all 5 out of 6 tabs) at once. To me that is not necessary since user might change data only on one tab for example. In order to improve efficiency of this code I would like to have logic in place that will prevent user to lose the data and at the same time give them an option to save the data before they leave the tab. Here is example of my code:

<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>

First thing that I was wondering if each tab section should be in the separate form or I should have one form for all tabs?
Second, if user enters data in tab 2 then clicks on tab 4 at that point should I show alert where they will get the message like "Do you want to save your data before you switch to different tab?" Then have two buttons "Yes" or "Continue". If they click "Yes" data should be saved if not just open the next tab. 
Is there a way to achieve this with JQuery and Bootstrap 4?
Thank you. 

A:

I'd use one form and if a user updates data only on one tab, I'd send values of input fields of that tab to server.
Here is a basic example based on your code using 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>

