如何防止表单被提交？

Posted 2023-05-07

技术标签:

【中文标题】如何防止表单被提交？【英文标题】：How to prevent form from being submitted? 【发布时间】：2016-06-30 09:25:08 【问题描述】：

我有一个表单，其中某处有一个提交按钮。

但是，我想以某种方式“捕捉”提交事件并防止它发生。

有什么办法可以做到这一点吗？

我无法修改提交按钮，因为它是自定义控件的一部分。

【问题讨论】：

您仍然可以访问提交按钮。渲染页面并通过查看页面源获取其 ClientID。然后，使用像 jQuery 这样的东西，你可以做类似 $('#ctl01_cph01_controlBtn1').click(function() return false;); @Rafael：是的……但那将是最后的手段——这是一个非常复杂的控制。 @Raf 这是基于 asp.net 的，也不是最佳实践。但它本质上是正确的。我只是避免偷看源代码并使用控件名称，因为如果有人编辑页面，它可能会改变。意外的副作用等。 【参考方案1】：

与其他答案不同，return false 只是答案的部分。考虑在return语句之前发生JS错误的场景......

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

脚本

function mySubmitFunction()

  someBug()
  return false;

在此处返回false 将不会被执行，无论哪种方式都将提交表单。您还应该调用 preventDefault 来阻止 Ajax 表单提交的默认表单操作。

function mySubmitFunction(e) 
  e.preventDefault();
  someBug();
  return false;

在这种情况下，即使有错误，表单也不会提交！

或者，可以使用try...catch 块。

function mySubmit(e)  
  e.preventDefault(); 
  try 
   someBug();
   catch (e) 
   throw new Error(e.message);
  
  return false;

【讨论】：

为什么不直接从onsumbit返回false？您可能希望在 onsubmit 中向用户显示错误消息。例如，“完成此必填字段然后提交”。在这种情况下 event.preventDefault 会派上用场 @ProfK 如果你使用 event.preventDefault() 没关系，try/catch 只是你错误处理的一部分 @BenRowe 您应该将 evt 参数添加到被调用的方法中。 (<form onsubmit="return mySubmitFunction(evt)">)。否则会给出未定义的错误。【参考方案2】：

你可以像这样使用内联事件onsubmit

<form onsubmit="alert('stop submit'); return false;" >

或者

<script>
   function toSubmit()
      alert('I will not submit');
      return false;
   
</script>

<form onsubmit="return toSubmit();" >

Demo

现在，在制作大型项目时，这可能不是一个好主意。您可能需要使用事件监听器。

请read more about Inline Events vs Event Listeners (addEventListener and IE's attachEvent) here。因为我无法比Chris Baker 解释更多。

两者都是正确的，但它们本身都不是“最好的”，并且可能有开发人员选择同时使用这两种方法的原因。

【讨论】：

不错，路上快速解决。由于某种原因，<form onsubmit="return false;" > 对我不起作用。【参考方案3】：

使用.addEventListener() 将事件侦听器附加到表单，然后在event 上调用.preventDefault() 方法：

const element = document.querySelector('form');
element.addEventListener('submit', event => 
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
);

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

我认为这是一个比在onsubmit 属性内联定义submit 事件处理程序更好的解决方案，因为它分离了网页逻辑和结构。维护逻辑与 html 分离的项目要容易得多。见：Unobtrusive javascript。

使用form DOM 对象的.onsubmit 属性不是一个好主意，因为它会阻止您将多个提交回调附加到一个元素。见addEventListener vs onclick 。

【讨论】：

& 对于 jquery：$("button").click(function(e) e.preventDefault() ); +1 不知道为什么所有其他答案都继续使用内联 onsubmits，因为 OP 提到他无法更改按钮（这意味着他可能也无法更改表单）。想知道如果我们有按钮 id 是否有办法获取“表单” 内联垃圾仍然是投票最多的，但这不是真正的 JS 编程方式，因为...... 2012？这个解决方案就是解决方案。我喜欢这个解决方案的大部分，但我避免使用querySelector，因为它返回文档中与给定选择器匹配的第一个元素。如果稍后在页面的前面添加第二个表单，这可能会使您的代码中断，这是经常发生的事情，例如，如果您决定稍后将登录表单添加到标题，或者即使一个不可见或隐藏的表单是由CMS 模块。（我在项目中看到过这种情况。）使用getElementById 更可靠，因为根据 HTML 规范，ID 必须是唯一的，至少在每个 DOM 树中都是唯一的，并且验证器会在它出现时捕获不是。【参考方案4】：

目前以下工作（在 chrome 和 firefox 中测试）：

<form onsubmit="event.preventDefault(); return validateMyForm();">

其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键是使用名称event。我们不能用于例如e.preventDefault()

【讨论】：

onsubmit="return validateMyForm();"就足够了，但 validateMyForm() 应该返回 true 或 false。【参考方案5】：

试试这个...

HTML 代码

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery 代码

$(function()
    $('.submit').on('submit', function(event)
        event.preventDefault();
        alert("Form Submission stopped.");
    );
);

或

$(function()
    $('.submit').on('submit', function(event)
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    );
);

【讨论】：

本题没有jQuery标签。 @Gothdo 但解决方案仍然相同。疯了吧？ @Gothdo 是的，完全一样。 eventObject.preventDefault。绑定处理程序的方式不会改变解决方案。我什至会争辩说你的答案与接受的答案没有什么不同。 stopPropagation 是唯一对我有用的东西。谢谢！ :)【参考方案6】：

var form = document.getElementById("idOfForm");
form.onsubmit = function() 
  return false;

【讨论】：

我认为使用.onsubmit 是个坏主意，因为它会阻止您将多个submit 回调附加到一个元素。我推荐使用.addEventListener()。即使您已经通过属性 .onsubmit 设置了事件处理程序，您仍然可以通过 .addEventListener() 添加其他处理程序。属性注册的处理程序将首先被调用，然后按照注册的顺序调用 .addEventListener() 注册的处理程序。【参考方案7】：

为了防止表单提交，您只需要这样做。

<form onsubmit="event.preventDefault()">
    .....
</form>

通过使用上述代码，这将阻止您的表单提交。

【讨论】：

【参考方案8】：

要遵循unobtrusive JavaScript 编程约定，并根据DOM 的加载速度，最好使用以下内容：

<form onsubmit="return false;"></form>

如果您正在使用库，则使用 onload 或 DOM 准备好连接事件。

$(function() 
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) 
        // quick validation example...
        $form.children('input[type="text"]').each(function()
            if($(this).val().length == 0) 
                alert('You are missing a field');
                ev.preventDefault();
            
        );
    );
);

label 
    display: block;


#my-form > input[type="text"] 
    background: cyan;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

另外，我会一直使用action 属性，因为有些人可能会运行一些像NoScript 这样的插件，这会破坏验证。如果您使用 action 属性，至少您的用户将被服务器根据后端验证重定向。另一方面，如果您使用window.location 之类的东西，情况会很糟糕。

【讨论】：

【参考方案9】：

您可以将 eventListner 添加到表单中，即preventDefault() 并将表单数据转换为 JSON，如下所示：

const formToJSON = elements => [].reduce.call(elements, (data, element) => 
  data[element.name] = element.value;
  return data;

, );

const handleFormSubmit = event => 
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => 
      const rawResponse = await fetch('/', 
        method: 'POST',
        headers: 
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        ,
        body: jdata
      );
      const content = await rawResponse.json();

      console.log(content);
    )();
;

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>

【讨论】：

【参考方案10】：

这是我的答案：

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => 
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;

</script>

我在onsubmit 上添加event.preventDefault(); 并且它有效。

【讨论】：

以上是关于如何防止表单被提交？的主要内容，如果未能解决你的问题，请参考以下文章

如何防止表单提交在字段上点击输入？ [复制]

如何防止表单的重复提交

如何防止HTMLFormElement.submit()调用表单提交[重复]。

php防止用户重复提交表单

php中如何防止刷新一次提交一次

如何防止按钮提交表单