Question

我有一个这样的表格，

<form>
  Username: <input type="text" name="usrname" required>
  <input type="button" value="Post">
</form>

如果用户点击按钮而不在文本框中输入任何内容，我希望弹出一个工具提示。

我知道如果我将按钮改为这样 - <input type="submit" value="Post">，它会起作用。但我不想这样做。

Answer 1

您的意思是formaction而不是action吗？

<input type="text" name="usrname" required formaction="action_page.php">

action是form代码属性，而不是input s。

Answer 2

使用HTML5

尝试这样它会起作用：专门针对form标记的操作属性。不是input代码

<form action="action_page.php">
    Username: <input type="text" name="usrname" required >
    <input type="submit" value="Post">
</form>

Answer 3

在标签中使用方法“POST”，它将起作用

   <form action="action_page.php" method="POST">
        Username: <input type="text" name="usrname" required >
        <input type="submit" value="Post">
    </form>

Answer 4

我根据this帖子的答案想出了如何使用一些jQuery做到这一点。

以下代码完全符合我的要求，

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<form id="myForm">
  Username: <input type="text" name="usrname" required id="input">
  <input type="button" value="Post" id="button">
</form>


<script>
$('#button').click(function(e) {

  if ($('#input').val() === "") {

      $('<input type="submit">').hide().appendTo('#myForm').click().remove();

  }

});

</script>

</body>
</html>

请参阅here了解DEMO

HTML5中文本框的输入验证

4 个答案: