Bootstrap 4 表单验证和提交

Question

I have a Bootstrap 4 form using validation, using the "starter" javascript found on their web site: https://getbootstrap.com/docs/4.4/components/forms/#validation .

This form exists inside of a Google Docs add-on sidebar. When the form submits, I'm not calling another URI, but rather, I want to only collect the information from the form and then work with it using Google Apps Script.

The starter javascript is correctly validating the form fields, but when the form submits, a new browser tab is opening, which I DON'T want to happen.

I've modified the starter code below only to call my own function from within the 'else' portion. Currently, my function submitFeedback() does nothing more than post an alert to let me know code execution has reached that point, but at the same time execution transfers to function submitFeedback(), the new tab opens in the browser.

How can I prevent this new browser tab from opening when the form is submitted?

<form class="needs-validation" novalidate>
    <div class="form-group">
        <label for="frmFirstName">First name</label>
        <input type="text" class="form-control" id="frmFirstName" placeholder="First name" required>
        <div class="invalid-feedback">
            Please enter your first name.
        </div>
    </div>
    <div class="form-group">
        <label for="frmLastName">Last name</label>
        <input type="text" class="form-control" id="frmLastName" placeholder="Last name" required>
        <div class="invalid-feedback">
            Please enter your last name.
        </div>
    </div>
    <div class="form-group">
        <label for="frmEmail">Email</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
            </div>
            <input type="text" class="form-control" id="frmEmail" placeholder="user@domain.com" aria-describedby="inputGroupPrepend" required>
            <div class="invalid-feedback">
                Please enter your email.
            </div>
        </div>
    </div>                          
    <div class="form-group">
        <label for="frmCategory">What's on your mind?</label>
        <select id="frmCategory" class="custom-select form-control" required>
            <option value="">- Select -</option>
            <option value="1">I have a question</option>
            <option value="2">I have an idea</option>
            <option value="3">I have a compliment</option>
            <option value="4">I found a problem :(</option>
        </select>
        <div class="invalid-feedback">
            Please select an option.
        </div>
    </div>
    <div class="form-group">
        <label for="frmDetails">Tell us all about it...</label>
        <textarea id="frmDetails" class="form-control" rows="3" placeholder="Enter your comments here" required></textarea>
        <div class="invalid-feedback">
            Please provide your comments here.
        </div>
    </div>                               
    <button class="btn btn-primary btn-sm" type="submit">Submit form</button>
</form>


...

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
        submitFeedback();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

// function to gather and process data from form
function submitFeedback(){
    alert ('inside feedback function');
}
</script>

Answer 1

In Firefox latest and Chrome its not opening a new tab at least not the code posted.So check if you use a local webserver what is defined there or if using an other browser if its a browser specific behavior. If its the same browser, try to empty cache and open developer tools to see whats happening in detail.

Answer 2

base target in the head section of the html file was the culprit. After removing it, all worked as anticipated. This tag is added by default when creating a new html file using the Google Apps Script editor.

<head> <base target="_top"> </head>