带有验证且无页面刷新的jQuery .submit（）

Question

我有一个其他人似乎遇到的问题，但是我无法获得推荐的解决方案（即“ return false;”）来工作。 任何帮助将是巨大的！

描述：

提交表单后，我要验证输入的格式正确（即，键入=“ email”）并启动警报（即“表单已提交。”）， 而无需刷新页面。 当前，警报不出现，并且页面刷新。

测试代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <!-- Form -->
        <form>
            <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
            <button type="submit" id="submit">Submit</button>
        </form>

        <!-- Alert on Submission -->
        <script>
            console.log("Ready to Go!");
            $('#submit').submit(function () {
                alert("Form submitted.");
                return false;
            });
        </script>
    </body>
</html>

Answer 1

您将要捕获表单的submit事件。 按钮上没有submit事件。

        $('form').submit(function () {
            if (*everything ok*) {
                alert("Form submitted.");
            } else {
                return false;
            }
        });

理想情况下，您将使用ID或类来帮助标识您的<form> ，即：

<form id="xyz-form">

然后将选择器更改为：

$('#xyz-form').submit(...);

现在，这只是在出现错误时阻止表单提交。 当return false; 不提交回调需要，你的页面会刷新路径。 如果您希望不刷新就将数据提交到服务器，则需要采取不同的方法。

Answer 2

给您的表单一个ID，然后将您的jquery改为使用#formid。

例如：

<form id="form">
    <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
    <button type="submit" id="submit">Submit</button>
</form>

<script type="text/javascript">
    $('#form').submit(function () {
        alert("Form submitted.");
        return false;
    });
</script>

Answer 3

附加到jQuery中的commit函数的事件处理程序可以是form元素或div元素。 有关j Query API的更多信息，您可以在用户单击Submit按钮时实现click事件，而无需使用jQuery的preventDefault函数进行默认的提交行为

console.log("Ready to Go!");
            $('form').submit(function () {
                alert("Form submitted.");
                return false;
            });
$("#submit").click(function(e){
      if (hasError){
          e.preventDefault();
      }
      else{
         alert("success");
      }
 })

创建if和else语句是为了进行简单验证。 对于您的问题范围，我将大部分编码留给您使用。 但是您基本上可以创建一个简单的功能来检查用户输入是否有错误，如果有错误，请防止提交按钮的默认提交行为。 如果输入不为空且输入没有错误，请警告用户该表单已提交。

Answer 4

试试这个代替

    $('#submit').click(function () {
        alert("Form submitted.");
        return false;
    });

它会完成您想要的。

基本上，点击会在提交之前触发

试试这个片段来清理

 console.log("Ready to Go!");

$('#submit').click(function () {
  alert("Form submitted.");
  //return false;
  return true;
});

$("form").submit(function( event ) {
  alert("woot woot");
});

带有验证且无页面刷新的jQuery .submit（）

问题描述

4 个解决方案

解决方案1
4 已采纳 2014-10-07 21:06:59

解决方案2
2 2014-10-07 21:06:31

解决方案3
0 2014-10-07 21:21:41

解决方案4
-2 2014-10-07 21:08:28

带有验证且无页面刷新的jQuery .submit（）

问题描述

4 个解决方案

解决方案1 4 已采纳 2014-10-07 21:06:59

解决方案2 2 2014-10-07 21:06:31

解决方案3 0 2014-10-07 21:21:41

解决方案4 -2 2014-10-07 21:08:28

解决方案1
4 已采纳 2014-10-07 21:06:59

解决方案2
2 2014-10-07 21:06:31

解决方案3
0 2014-10-07 21:21:41

解决方案4
-2 2014-10-07 21:08:28