Hide/locking 一个 <form> 按钮，直到表单完全填满验证

Question

我用一个表单和一个按钮制作我的 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 一起使用，但我只是不知道如何锁定它。这是锁定且表单未完成时将输入的消息：

You have not finished the information input for the survey. Please input "Your First Name" and "Your Last Name" to enter the survey.

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

代码语言

我使用小提琴制作我的代码，所以我使用：

HTML
JSON
捏jQuery（加载图标）

回答期望

在我的回答中，我需要：

推荐的代码语言
用于注释目的的代码
划掉属性
编码解释前的属性

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

Answer 1

您可以使用纯 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

Answer 2

您好，我推荐 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>

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

Hide/locking 一个 <form> 按钮，直到表单完全填满验证

Hide/locking a <form> button until form is completely filled with validation

html

javascript

validation

jquery

disable-link

代码语言

回答期望