表单仍然提交，尝试使用 e.preventDefault();答案

【问题标题】：Form still submits, trying to use e.preventDefault();表单仍然提交，尝试使用 e.preventDefault();
【发布时间】：2017-07-27 15:57:17
【问题描述】：

所以我有这个表格。我想检查用户是否验证了验证码，但有问题。这是检查功能的表单。

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()">

这是确定 doSubmit（验证码）是否已验证的函数。

function check_if_capcha_is_filled(e){
  if(doSubmit) return true;
  e.preventDefault();
  alert('Fill in the capcha!');
  return false;
};

但我得到一个错误

Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at check_if_capcha_is_filled

任何指向我缺少什么的指针？谢谢。

【问题讨论】：

onsubmit="return check_if_capcha_is_filled(event)" 更好的是，使用addEventListener 并删除过时的on* 事件属性
将e.preventDefault();放在函数内的第一行
删除所有内联 js 和 css - 这是一种不好的做法，会导致难以维护的代码和意外行为，您使用 preventDefault 不正确，将发布答案

标签： javascript jquery html preventdefault onsubmit

【解决方案1】：

您的 e.preventDefault 使用不正确。它什么也不做，因为你将一个事件传递给一个函数，你想像这样将它附加到事件处理程序：

$('form').on('submit', function(e)
{
    e.preventDefault();
    //rest of code
})

这将停止提交操作。

参考：http://api.jquery.com/event.preventDefault/

【讨论】：

【解决方案2】：

这是你想要的吗？

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">

然后在你的js文件中：

function check_if_capcha_is_filled(){
    if (doSubmit){
        return true;
    }else{
        return false;
    }
};

$('#myForm').on('submit', function(e){
    if (!check_if_capcha_is_filled){
        e.preventDefault();
    }
});

【讨论】：

【解决方案3】：

这里有两个问题。首先，您需要 return 来自 onsubmit 事件属性的函数。其次，您没有将事件传递给函数 - 但是这只适用于全局事件可用的情况，即。不是火狐。

要解决此问题并改进您的逻辑，您可以改为使用addEventListener() 将事件处理程序隐蔽地添加到元素，并删除过时的on* 事件属性。试试这个：

var doSubmit = false;

document.getElementById('myForm').addEventListener('submit', function(e) {
  if (doSubmit) 
    return;
    
  e.preventDefault();
  alert('Fill in the capcha!');
});

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
  <button type="submit">Submit</button>
  <form>

【讨论】：

【解决方案4】：

使用on事件监听器

改成

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" >

 $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });

【讨论】：

【解决方案5】：

使用 jQuery 并且如果您想确认提交。

<button name="delete" class="submitbutton">Delete</button>

$('.submitbutton').click(function() {
    var buttonpressed;
    buttonpressed = $(this).attr('name');
    var r = confirm("Please confirm to " + buttonpressed );

    if (r == true) {
        $('#yourformid').submit();
    } else {
        return (false);
    }
});

【讨论】：