jQuery 提交时绕过 HTML“必需”属性

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18725078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 22:19:28  来源:igfitidea点击:

Bypass HTML "required" attribute when submitting

javascriptjqueryhtmlform-submitrequiredfieldvalidator

提问by Horst Walter

I use requiredfor a 1st check before submitting a form.

required在提交表单之前用于第一次检查。

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
  <input type="submit" value="ignore">
</form>

Problem is, that I have an "ignore" button, which submits the form as well and the backend logic then sets a correct state in a DB. In this case (ignore) the validation is not desired (because there is no need to fill in field "Foo").

问题是,我有一个“忽略”按钮,它也提交表单,然后后端逻辑在数据库中设置正确的状态。在这种情况下(忽略)不需要验证(因为不需要填写字段“Foo”)。

What's the best way to handle the 2 scenarios?

处理这两种情况的最佳方法是什么?

  1. I am aware that I could give up "required" and do the validation somewhere else (backend / JavaScript). I am looking for a way to keep the "required".
  2. I could use some Js onclickfor the ignore button scenario and remove the attribute just before sending the form ( https://stackoverflow.com/a/13951500/356726).
  1. 我知道我可以放弃“必需”并在其他地方(后端/JavaScript)进行验证。我正在寻找一种保持“必需”的方法。
  2. 我可以onclick在忽略按钮场景中使用一些 Js并在发送表单之前删除该属性(https://stackoverflow.com/a/13951500/356726)。

But actually I am looking for something smarter ....

但实际上我正在寻找更聪明的东西......

--- Edit ---

- - 编辑 - -

Yes, duplicate of Required attribute HTML5

是的,必需属性 HTML5 的重复项

回答by Bergi

No JavaScript, no second form needed, and the validation can stay:

没有 JavaScript,不需要第二个表单,验证可以保留:

For exactly this use case the HTML5 spec has designed the formnovalidateattributefor submit elements (like <input type=submit>), as one of the attributes for form submission:

正是这种情况下,使用HTML5规范设计了formnovalidate属性为提交元素(如<input type=submit>),作为一个表单提交的属性

The formnovalidateattribute can be used to make submit buttons that do not trigger the constraint validation.

formnovalidate属性可用于制作不触发约束验证的提交按钮。

So simply put

所以简单地说

<form action="myform.php">
  Foo: <input type="text" name="someField" required>
  <input type="submit" value="submit">
  <input type="submit" value="ignore" formnovalidate>
</form>

回答by isherwood

Your #2 is a common approach. Something like:

你的#2 是一种常见的方法。就像是:

$('input[value="ignore"]').click(function() {
    $(this).siblings('input[type="text"]').removeAttr('required');
});

Might have to use mousedown to beat submit.

可能必须使用 mousedown 来击败提交。

回答by Matt Kenefick

If you don't want to use Javascript, you could make them separate forms and have all the inputs set to hidden for the ignoreform.

如果您不想使用 Javascript,您可以将它们设为单独的表单,并将表单的所有输入设置为隐藏ignore

Not the best option, but it is an alternative.

不是最好的选择,但它是另一种选择。

回答by Jukka K. Korpela

You should use approach #1 on the following grounds: The main reasons for using requiredinstead of JavaScript validation is that it is simpler and it works even when JavaScript is disabled. Here the simplicity does not apply, since the use of requiredmakes things more difficult. And the latter reason does not apply either: with JavaScript disabled and the browser supporting required, the “ignore” button does not work unless some data is entered in the textfield.

您应该基于以下理由使用方法 #1: 使用required而不是 JavaScript 验证的主要原因是它更简单,即使禁用 JavaScript 也能工作。这里的简单并不适用,因为使用required使事情变得更加困难。后一个原因也不适用:在禁用 JavaScript 且浏览器支持 的情况下required,除非在文本字段中输入一些数据,否则“忽略”按钮不起作用。

Another alternative is the one mentioned on @MattKenefick's answer. It might even result in simpler structure and logic. If the form is really as simple as in the example, it is straightforward to split it to two forms:

另一种选择是@MattKenefick 的回答中提到的那个。它甚至可能导致更简单的结构和逻辑。如果表单真的像示例中一样简单,则可以直接将其拆分为两种形式:

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
</form>
<form action="myform.php">
  <input type="submit" value="ignore">
</form>