无法让输入验证 Javascript 工作答案

【问题标题】：Can't get input validation Javascript to work无法让输入验证 Javascript 工作
【发布时间】：2020-04-15 15:16:45
【问题描述】：

抱歉，如果这个问题的布局不正确（我第一次使用堆栈溢出）。我正在尝试验证当用户按下提交时我在表单上的输入是否已填写，它会在输入为空时提醒用户，但当它们不是时，我不确定出了什么问题。这是我的 Javascript：

<script>
   function validation() {
     var x = document.forms["bookingForm"]["id"].value;
     if (x == "") {
       alert("Ensure all fileds are filled");
       return false;
     } else {
       sendSMS();
       alert("Success");
       return true;
     }
      }
</script>

这里是代码扩展部分的链接，供参考：https://pastebin.com/Dj5fA3gB

【问题讨论】：

x的值是多少？
为什么不像这样为每个输入添加 required ？
@Keff x 等于输入数据。
@Aaron 我已经添加了它，因为它很有用，但它不能解决我遇到的问题。
再想一想，添加 required 会使验证无效。谢谢。

标签： javascript forms validation submit

【解决方案1】：

如果你使用 submitButton 并且你在表单的 onSubmit 上调用验证，那么你需要调用 event.preventDefault();

<!DOCTYPE html>
<html>
<body>

<form onsubmit="validation()" name="bookingForm">
  First Name: <input type="text" name="id" value="Donald"><br>
  Last Name: <input type="text" name="lname" value="Duck">
  <input type="submit" value="Submit" />
</form>

<script>
function validation() {
	 event.preventDefault();
         var x = document.forms["bookingForm"]["id"].value;
         if (x == "") {
           alert("Ensure all fileds are filled");
           return false;
         } else {
           sendSMS();
           alert("Success");
           return true;
         }
      }
</script>

</body>
</html>

【讨论】：

我将代码更改为按照您在此处描述的方式工作，但问题仍然存在。

【解决方案2】：

访问表单元素和元素值的一般语法是：

document.forms[number].elements[number]


document.forms[number].elements[number].value

【讨论】：

我不确定您所说的“数字”是什么意思，这与表单代码中的什么相关？

【解决方案3】：

正如我在评论中所建议的，最干净的解决方案是使用所需的 html 属性，将其添加到您的输入中。

看起来像这样。

<form>
 <input type="text" name="example" required>
 <input type="submit" name="send">
</form>

最大的优点是它无需任何额外的 JS 即可工作，我认为这始终是首选解决方案。

【讨论】：

【解决方案4】：

您没有在表单标签中包含返回关键字，并在表单标签中添加了不必要的关键字“名称”。

<form onsubmit="return validation()" method="POST"
                    action="">

从表单标签中删除“名称”属性并添加操作属性。在 action 属性的括号内，提及如果您的验证成功会发生什么例如：（这段代码帮助你理解“动作”属性）

<form onsubmit="return productsvalidationform();" method="POST"
                    action="AddProductServlet">

成功验证表单后，我定向到 AddProductServlet。（AddProductServlet 是 JSP servlet）。所以提到你需要重定向到哪里。

【讨论】：