jquery alert

Question

我正在尝试创建一个加载屏幕，以便在提交表单时显示它，除了Safari之外它的效果很好，问题是如果你单击输入或提交警报但是当你点击好的时候为了使警报消失，因为提交事件而出现加载并且不会消失。我试过很多这个，但我似乎无法弄清楚，我是jquery的初学者。

总结一下，在警报之后的徒步旅行中，加载屏幕出现时，它也没有假设，并且不会消失。

我希望只有在提交表单时才会显示加载屏幕。或替代方案是加载屏幕不显示在Safari浏览器中。

<script>
      var form = document.getElementById('formID'); // form has to have ID: <form id="formID">      
      var ua = navigator.userAgent.toLowerCase();
    
      if (ua.indexOf('safari') != -1) {
        if (ua.indexOf('chrome') > -1) {
    
        } else {
    
          form.noValidate = true;
          form.addEventListener('submit', function(event) { /*listen for form submitting */
            if (!event.target.checkValidity()) {
              event.preventDefault(); /*dismiss the default functionality*/
              alert('Please, fill the form before you submit'); /*error message*/
              $("#formID").attr("id", "form");
              $(".circularG1").addClass("active");
              $(".circularbrg").addClass("active");
            }
          }, false);
        }
      }
    </script>
    <!--loading screen appears while form submit's-->
    
    <script type="text/javascript">
      $(document).ready(function() {
        $('#formID').submit(function() {
          var pass = true; //some validations
          if (pass == false) {
            return false;
            $(".circularG1").addClass('active'); //hides loading if clicked
            $(".circularbrg").addClass('active'); // hides loading if clicked
          } else {
            $(".circularG1, .active").removeClass('active'); //shows loading if clicked
            $(".circularbrg, .active").removeClass('active'); // shows loading if clicked
          }
        });
      });
    </script>
    <!--^--END--^-->
    <!-- 3. Add this script for Function of Hamburger Menu -->
    <script>
      $(document).ready(function() {
        $(".icon").on("click", function() {
          $("header .nav ul").toggleClass("open", 200);
        });
    
      });
    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

 <div class="circularG1 active">
	<div id="circularG_1" class="circularG"></div>
	<div id="circularG_2" class="circularG"></div>
	<div id="circularG_3" class="circularG"></div>
	<div id="circularG_4" class="circularG"></div>
	<div id="circularG_5" class="circularG"></div>
	<div id="circularG_6" class="circularG"></div>
	<div id="circularG_7" class="circularG"></div>
	<div id="circularG_8" class="circularG"></div>
</div>
 <div class="circularbrg active"></div>
    
<form id="formID" class="Form" action="" method="post">

  <input name="fname" type="text" placeholder="First Name" maxlength="50" min="2" required>

  <input name="lname" type="text" placeholder="Last Name"  maxlength="50" min="2" required>

  <input type="submit" name="submit" class="submit">

</form>

Answer 1

解决此问题的最佳方法是完全删除警报行并使用其他方法。例如，在表单html中添加一个div：

<div id="form-message"></div>

然后在您的jQuery中，将警报行替换为：

$('#form-message').text('Please, fill the form before you submit');

这在可用性方面更好，因为这些天很少（如果曾经）在网站上使用实际警报。

希望这有帮助！