jquery表单提交防止默认

Question

我正在尝试在着陆页上制作一个简单的电子邮件表单。 出于测试目的，我不想实际提交表单。 但每次我点击它，它都会阻止我阻止默认的尝试。 无论我如何退出submit（）函数，它都坚持提交此表单！

$(document).ready( function () {
function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( $email ) ) {
        return false;
    } else {
        return true;
    }
}

$("#email_box").click( function () { $(this).val(''); } );

$("#email_form").click(

function(e) {
    var valid = validateEmail($("#email_box").val());


    if (!valid)
    {
        $("#error_msg").fadeIn("slow");
    } else {
        $("#error_msg").style("display", "none");
        $("#email_box").val("Thanks, you'll hear from us soon!").fadeIn("slow");
        //$("#thank_you_msg").fadeIn("slow");
    }

    e.preventDefault();
    return false;   
}

);

});

为什么仍然要发送请求？

对我来说，最奇怪的是，如果表格无效，则不提交。 但如果表格实际上有效，则提交!!

Answer 1

唯一可能的选项（如果它确实是表单名称...）是您的代码在DOM准备好之前执行的。

把它放在DOM ready回调中：

$(function(){
    $("#email_form").submit(function(e) {       
      e.preventDefault();
    });
});

检查你的处理程序是否会被解雇是一件明智的事情！

$(function(){
    $("#email_form").submit(function(e) {       
      alert('Fired!'); // <<<<<=====
      e.preventDefault();
    });
});

Answer 2

我刚刚实现：你使用点击不提交：

it should be : $("#email_form").submit(function(e){});
not: $("#email_form").click(function(e){});

函数应该在dom之外声明！ 如果你把防止默认作为第一件事，即使有错误也不会提交！

function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if( !emailReg.test( $email ) ) {
        return false;
    } else {
        return true;
    }
}

$(document).ready( function () {

    $("#email_box").click( function () { $(this).val(''); } );

    $("#email_form").submit(function(e){
            e.preventDefault();
        var valid = validateEmail($("#email_box").val());   
        if (!valid)
        {
            $("#error_msg").fadeIn("slow");
        } else {
            $("#error_msg").style("display", "none");
            $("#email_box").val("Thanks, you'll hear from us soon!").fadeIn("slow");
            //$("#thank_you_msg").fadeIn("slow");
        }   

        return false;   
    });

});

必须有一个javascript错误或它首先没有绑定事件，请确保你有html：

<form id='email_form' ></form>

1. 确保你有一个带有id =“email_form”的表单，有时候你可能会犯一个错误，把class或name属性作为带有id的表单只在javascript中有用我们没有习惯对它们进行识别，
2. 尝试返回false; 而不是e.preventDefault（）; 我不确定这是否适用于表格
3. 使用DOM ready事件： $(function(){/*code*/});
4. 确保jQuery没有错误，例如，旧的jQuery版本在IE中有错误。 由于出错，请确保浏览器不会退出您的代码！
5. 如果你正在使用影响$ var的其他库或spinets使用jQuery("#email_form").submit(); 而不是$

Answer 3

尝试绑定click事件，并阻止默认值。

$("#your-submit-button").bind('click', function(e){e.preventDefault()});

Answer 4

你在$("#email_form")里面说它是你应该使用的表单id

$("#email_form").submit(function(e){
    e.preventDefault();
    // other code 
});

代替

$("#email_form").click(function(e){...});

和表单应该具有id“email_form”之类的

<form id="email_form" method="post" action="something">
 <!-- Inputs Here -->
</form>

这是一个非常简单的小提琴 。

你已经改变了你的问题，现在你想要在验证返回true时提交它，所以

var valid = validateEmail($("#email_box").val());
if (!valid)
{
    $("#error_msg").fadeIn("slow");
} 
else
{
    $(this).submit(); // This line will submit the form.
}

Answer 5

尝试新的“on”事件语法。

$(document).ready(function() {
  $('form').on('submit', function(e){
    e.preventDefault();
    // your validation code here
  });
});