如何让我的成功验证表单弹出停留更长时间？答案

【问题标题】：How to make my successfull validation form pop up stay longer?如何让我的成功验证表单弹出停留更长时间？
【发布时间】：2020-07-30 23:18:24
【问题描述】：

我遇到了弹出警报的问题。每当我提交我的表单时，一个弹出窗口会显示它已成功提交，但它只出现一秒钟，我希望它留在那里。我该怎么做呢？这是我到目前为止所做的：

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (!emailPattern.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
    event.preventDefault();
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
    $('#testForm').submit();
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="testform">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

【问题讨论】：

让示例响应式希望它不会弄乱你的代码
将按钮 type="submit" 更改为 type="button"
@aXuser264 它没有弄乱代码，但弹出窗口仍然只出现一秒钟
@AnbarasiSelvaraj 成功了。但表格上的信息仍然存在。还是提交了吗？
如果您想使用任何服务器端程序处理提交数据.. 您需要使用任何 ajaxcall 提交表单数据，然后通过 javascript/jquery 使文本字段为空...如果不需要在服务器端处理数据..然后用 javascript/jquery 单独清空文本字段..

标签： javascript html forms validation popup

【解决方案1】：

你上面我能看到的唯一问题是停止表单提交一段时间，经过一番搜索，我发现了与this post相关的问题。并使代码相应地工作。（是的，它提交表单）

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (!emailPattern.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
  }

  window.setTimeout(() => {
    document.createElement('form').submit.call(document.forms['testform'])
  }, 2500);

  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="testform">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

【讨论】：

太好了 :D 主要问题之一是是否正在提交表单。非常感谢！
@AndreiaGaspar 嘿，如果有帮助，别忘了标记答案并点赞
完成 :) 对不起，我很久没有使用堆栈溢出了
@AndreiaGaspar 没关系，你可以结帐stackoverflow.com/help/someone-answers

【解决方案2】：

添加onSubmit="event.preventDefault();" 阻止表单提交，这就是您遇到此问题的原因。

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
<form id="testform" onSubmit="event.preventDefault();">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

【讨论】：

表单中的信息是否还在表单中被提交？
在我的测试中，没有。

【解决方案3】：

需要将按钮 type="submit" 更改为 type="button"....因为提交表单将被重新加载...否则我们应该阻止关于表单提交..

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
    //$("#fullname").val(''); //empty value in jquery
    document.getElementById('fullname').value="";//empty value in javascript
$("#emailaddress").val('')
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();


    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form id="testform">
   <div class="box">
       <label for="fullname" class="form-tag">Name</label>
          <input type="text" name="name" id="fullname" class="form-control" required/>
        <label for="emailaddress" class="form-tag">Email</label>
        <input type="email" name="email" id="emailaddress" class="form-control" required/>
         <div class="button">
           <button id="submit" type="button" class="btn btn-light btn-lg">Submit</button>
        </div>
    </div>
</form>

【讨论】：