2

我用一个表单和一个按钮制作我的 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>with function，getElementById但我根本不知道如何锁定它。以下是当它被锁定并且表单未完成时将输入的消息：

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



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

代码语言

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

  • HTML
  • JSON
  • 一小撮 jQuery（加载图标）

回答期望


在我的回答中，我需要：

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

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

4

2 回答 2

0

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

于 2021-03-11T01:06:42.117 回答
0

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

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

于 2021-03-11T01:52:46.153 回答