隐藏/锁定 <form> 按钮，直到表单完全填满验证

Posted 2023-05-09

【中文标题】隐藏/锁定 <form> 按钮，直到表单完全填满验证

【英文标题】：Hide/locking a <form> button until form is completely filled with validation

【发布时间】：2021-06-08 16:53:49

【问题描述】：

我用一个表单和一个按钮制作我的 JSON 脚本，但是当我在某人身上演示它时，他们可以随时按 提交 按钮。这是我的代码：

<form action="action_page.php" method="GET">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"<br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"<br><br>
</form>

我现在只需要验证以及如何锁定或隐藏按钮。 我尝试将<script> 与function 和getElementById 一起使用，但我根本不知道如何锁定它。以下是当它被锁定并且表单未完成时将输入的消息：

您尚未完成调查的信息输入。请 输入“您的名字”和“您的姓氏”进入调查。

当他们完成后，我将输入一个加载图标，直到完全加载。

---

代码语言

我使用小提琴来制作我的代码，所以我使用： html JSON jQuery（加载图标）

---

回答期望

在我的回答中，我需要： 推荐的代码语言 注释代码 划掉的属性 编码前的属性说明

---

编辑：我刚刚注意到我可以使用 disabled 布尔属性 here, 所以我只需要验证以禁用布尔属性，以便他们可以按下按钮。

【参考方案1】：

您好，我推荐 javascript，但它根本不安全。但是在这种情况下它是最有效的。这是代码：（请注意，我也更改了html）

<form action="action_page.php" method="get" >
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" onkeyup="inputEntries()"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" onkeyup="inputEntries()"><br><br>
  <button type="submit" name="submit" id="submit_btn" disabled="true">submit</button>
</form>

<script>
  var fname_var = document.getElementById("fname");
  var lname_var = document.getElementById("lname");

  var submit_btn_var = document.getElementById("submit_btn");

  function inputEntries()
    if(lname_var.value != "" && fname_var.value != "")
        submit_btn_var.disabled = false;
    else
      submit_btn_var.disabled = true;
  
</script>

它的作用是，如果两个输入字段都为空，则按钮不可点击，但如果两者都是，则可以点击。希望对您有所帮助！

【参考方案2】：

您可以使用纯 javascript 或 jQuery 进行验证。

在下面的代码中，您会看到我们首先将更改事件绑定到输入字段并获取其值。如果两个值都存在，则删除提交按钮的禁用属性。否则相反。

<p id="msg">You have not finished the information input for the survey. Please input "*Your First Name*" and "*Your
Last Name*" to enter the survey.</p>

<form action="action_page.php" method="GET">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"<br><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"<br><br><br>
  <button type="submit" id="btn-submit">Submit</button>
</form>

$(document).ready(function()
  ('#btn-submit').prop('disabled', true);

  $("input[type=text]").change(function()
    if ($('#fname').val() && $('#lname').val()) 
      $('#btn-submit').prop('disabled', false);
      $('#msg').hide();
     else 
      $('#btn-submit').prop('disabled', true);
      $('#msg').show();
    
  );
);

Stackblitz - https://stackblitz.com/edit/jquery-kgzhuo?file=index.html