必填字段，具有相同形式的两个子单元按钮

required field with two submnit button in same form

本文关键字：两个 按钮 单元 字段      更新时间：2023-09-26

我为表单中的所有字段设置了一个必填字段，并有两个提交按钮。并且只希望为一个子系统打开所需的数据。在另一次提交中，我不想要求表单字段如何防止在另一个提交按钮中要求字段。

<form action="data.php">
name<input type="text" name="name" required>
std<input type="text" name="name" required>
class<input type="text" name="name" required>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="clear">
<input type="save" name="save" value="save">
</form>

在这个给定的代码中，只有当我点击提交时，必填字段才应该发出警报。而不是在点击保存时发出警报。

您可以考虑捕获提交事件，并根据按下的按钮进行不同的检查。另外请注意，必填属性将始终使您的输入成为真正的必填项。在这里，我使用了一个自定义属性，它没有特殊的属性，但我会使用它来确定在我的自定义代码中需要哪些字段。

以下是使用jQuery:的Javascript中的情况

<form id="your_form" action="data.php">
name<input type="text" name="name" is_required>
std<input type="text" name="name">
class<input type="text" name="name" is_required>
    <br />
<input type="submit" name="submit2" value="submit">
</form>
<input type="submit" name="submit" value="submit with check">

var ok;
$('[name=submit]').on('click', function(e) {
    ok = true;
    $('[is_required]').each(function() {
       if (!$(this).val()) ok = false;
    });
    if (!ok) {
        alert("Please fill in all the required fields");
    } else
        $("#your_form").submit();
});

您可以在此处看到此代码的作用：http://jsfiddle.net/z9dkjdtz/

使用按钮中的formnovalidate属性指定禁止常规HTML5表单验证（例如检查所有required字段是否有值）：

<input type="submit" name="save" value="save" formnovalidate>

注意：type="save"无效并被忽略，因此元素将创建一个文本输入框（因为type="text"是默认值）。

相关文章：