带验证且不刷新页面的jQuery.submit(）

jQuery .submit() with validation and without page refresh

本文关键字：jQuery submit 验证 刷新      更新时间：2023-09-26

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

描述：

提交表单时，我希望验证输入的格式是否正确（即type="email"），并在不刷新页面的情况下启动警报（即"form submited."）。当前，警报不会出现，并且页面会刷新。

测试代码：

<!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>

您需要捕获表单的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;不是提交回调的路径时，您的页面将被刷新。如果您想在不刷新的情况下将数据提交到服务器，则需要采取不同的方法。

给表单一个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>
jQuery中submit函数附带的事件处理程序可以是form元素，也可以是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语句是为了进行简单的验证。关于你问题的范围，我把大部分代码留给你的创造力。但您基本上可以创建一个简单的函数来检查用户输入的错误，如果有错误，则阻止提交按钮的默认提交行为。如果输入不是空的，并且输入没有错误，则提醒用户表单已提交。

尝试使用

    $('#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");
});
相关文章：