preventDefault 提交表单

Question

我想运行在我的表单提交上使用函数（使用 Foundation 框架验证）：

$($newsletter).on('formvalid.zf.abide', function(ev) {
    ev.preventDefault();
    alert('validate!');
    openRevealNewsletter(this.getAttribute('action'));
});

当我的表单有效时我会收到警报，但我的 preventDefault() 不起作用。我的表格已提交:(

Answer 1

请试试这个：

$($newsletter).on('formvalid.zf.abide', function(ev) {
   alert('validate!');
   openRevealNewsletter(this.getAttribute('action'));
   return false;
});

这将在返回错误值时停止表单 post。

当您使用 return false 时，当您调用它时它会自动执行 3 件独立的事情：

1.event.preventDefault();

2.event.stopPropagation();

3.Stops callback execution and it returns immediately when callback are called.

Answer 2

拦截提交 submit 事件。

$($newsletter).on("submit",function(e) {
  e.preventDefault();
  console.log("submit intercepted");
  return false;
});
$($newsletter).on("forminvalid.zf.abide", function(e,target) {
  console.log("form is invalid");
  //show error messages
});
$($newsletter).on("formvalid.zf.abide", function(e,target) {
  console.log("form is valid");   
  //process form
  openRevealNewsletter(this.getAttribute('action'));
});

Answer 3

首先，完成这项工作的简单方法是使用

 <button type="button">submit</button>

而不是

    <button type="submit">submit</button>

要在 java 脚本中以编程方式提交表单，请使用

     document.getElementById("FormID").submit();

这将在您调用此脚本时提交您的表单，同时防止在您将提交按钮替换为提交按钮中的按钮后不需要默认值

preventDefault 提交表单

preventDefault on submitting form

javascript

preventdefault