jQuery .submit() 带有验证且不刷新页面答案

【问题标题】：jQuery .submit() with validation and without page refreshjQuery .submit() 带有验证且不刷新页面
【发布时间】：2014-10-07 21:01:07
【问题描述】：

我遇到了其他人似乎遇到的问题，但我无法让推荐的解决方案（即“return false;”）起作用。任何帮助都会很棒！

说明：

提交表单时，我想验证输入格式是否正确（即 type="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>

【问题讨论】：

页面最终需要刷新，除非您切换到 AJAX 帖子。您是否只是试图捕捉错误，然后在修复后最终提交？
为什么要使用提交按钮？为什么不是带有点击事件的常规按钮？
附带说明，25px 不是输入的有效尺寸，您只需要 25：w3schools.com/tags/att_input_size.asp

标签： javascript jquery html validation form-submit

【解决方案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; 不是提交回调所采用的路径时，您的页面将刷新。如果您想在不刷新的情况下将数据提交到服务器，则需要采用不同的方法。

【讨论】：

我可以谦虚地建议$("#submit").closest("form") 吗？
@Kyborek：是的，你可以！添加了一些词来改进选择器。

【解决方案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>

【讨论】：

【解决方案3】：

jQuery 中附加到提交函数的事件处理程序可以是表单元素或 div 元素。阅读更多关于 jQuery API 当用户单击提交按钮时，您可以使用 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 语句是为了简单的验证而创建的。对于您的问题范围，我将大部分编码留给您的创造力。但是你基本上可以创建一个简单的函数来检查用户输入的错误，如果有错误，防止提交按钮的默认提交行为。如果输入不为空并且输入没有错误，则提醒用户表单已提交。

【讨论】：

【解决方案4】：

试试这个

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

它会完成你想要的。

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

试试这个 sn-p 来解决问题

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

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

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

【讨论】：

这仍然会提交表单。