表单 - 按钮类型和所需输入答案

【问题标题】：Forms - Button types and required inputs表单 - 按钮类型和所需输入
【发布时间】：2017-08-18 19:04:30
【问题描述】：

这篇文章是关于“必需”输入在“按钮”类型的按钮中不起作用。

我有一个看起来像这样的表单：

<form action="submit.php" method="post">

<label for="username">Start Date</label>
<input id="username" name="inputUsername" type="text" required>

<button type="submit">Submit</button>
<button type="button" onclick="updateUsername()">Update</button>

</form>

当用户点击提交时，表单会运行脚本 submit.php。

当用户点击更新时，会有一个针对不同脚本 update.php 的 AJAX 调用。

这些脚本都运行良好，除了如果您在文本输入为空时单击“更新”按钮，无论如何它都会通过，而不会提醒用户“请填写此字段”。即使它是“必需的”。

我知道发生这种情况的原因是因为它的类型是按钮而不是提交。但是，我不能有两种提交类型，因为如果我有以下内容：

<form action="submit.php" method="post">

...

<button type="submit">Submit</button>
<button type="submit" onclick="updateUsername()">Update</button>

</form>

当我只希望它运行 update.php 时，它将在我的 JavaScript 函数 updateUsername() 中运行 submit.php 脚本和我的其他脚本 update.php。

感谢您的任何建议。

【问题讨论】：

标签： javascript html forms button

【解决方案1】：

好的，我认为该函数直接调用 Ajax 而无需验证，您需要使用 if 语句来检查值，并在此 if 语句中放置您的 Ajax

【讨论】：

我的 Ajax 调用确实没有任何验证，我会调查的。谢谢！

【解决方案2】：

您可以在 [ajax] 上使用 val 方法验证 username 输入是否有值。

$(document).ready(function() {
    var sUserName = $('#updateUsername').val();
    if ($.trim(sUserName) === '') {
        alert(''Provide a user name');
    }
});

希望对你有帮助

【讨论】：

【解决方案3】：

这是一个受answer启发的丑陋解决方案。

如您所见，HTML5 验证只会在提交表单时显示。所以你的第二个按钮需要提交表单。但是，提交表单将运行另一个脚本，因此我们需要防止这种情况发生。

您可以做的是，在单击按钮后，您可以使用onclick 属性保存被单击按钮的名称。我们将值存储为表单的属性，以便在下一步中更容易检索。然后，我们可以使用onsubmit 属性来确定点击了哪个按钮来执行相应的操作。

function doAction() {
   if (myform.clicked === 'update') {
       updateUsername();
       // prevent form from submitting
       return false;
   }
}

function updateUsername() {
   alert('do ajax call');
}

<form id="myform" method="post" action="submit.php" onsubmit="return doAction()">

<label for="username">Start Date</label>
<input id="username" name="inputUsername" type="text" required>

<button name="submit" type="submit" onclick="myform.clicked=this.name">Submit</button>
<button name="update" type="submit" onclick="myform.clicked=this.name">Update</button>
</form>

这就是为什么我避免使用 HTML5 验证而只编写自己的验证。

【讨论】：