Question

这篇文章是关于“必需”的输入，不适用于带有“按钮”类型的按钮。

我的表单看起来像这样：

<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时，会对另一个脚本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。

感谢您的任何建议。

Answer 1

好吧我认为函数直接调用Ajax而不用验证我需要使用if语句来检查值并在此if语句中放入你的Ajax

Answer 2

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

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

希望这有帮助

Answer 3

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

3 个答案: