Question

我有一个表单，我已经为它编写了验证脚本，但是，它不能100％正常工作。它输出错误很好，但提交按钮将提交表单，即使它已输出警告框。任何人都知道为什么？

显然并非所有代码都粘贴了。我只想使用Required参数，但我需要JS验证，因为它是一个赋值。此外，UL在此部分代码之前定义，因为在此之前有一个列表。

HTML：

<div class = "form">
            <form name = "contactForm" onsubmit="validateForm()" action = "form.php">

            <li><label>First name: </label><input type = "text" name = "fname" autofocus></li><br>

            <li><label>Last Name: </label><input type = "text" name = "lname"></li><br>

            <li><label>Email: </label><input type = "text" name = "email"> <button onclick = "validateEmail();return false">Check if email is valid</button> </li><br>

            <li><label>Message: </label> <br>

                <textarea rows = "10" cols = "50" name = "message"></textarea></li>

            <li> <input type = "submit"> </li>

            </form>

JavaScript的：

function validateForm()
{
  var x=document.forms["contactForm"]["fname"].value; //Gets the form and field name from the HTML

  if (x==null || x=="") //If the field "fname" contains null, or nothing, then output an alert telling the user to input something into the field. Same goes for the rest of the code.
  {
    alert("First name must be filled out");
    return false;
  }

  var x=document.forms["contactForm"]["lname"].value;

  if (x==null || x=="") 
  {
    alert("Last name must be filled out");
    return false; 
  }

  var x=document.forms["contactForm"]["email"].value;

  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

  if(reg.test(x) == false)
  {
      alert("Please enter a valid Email");
      return false;
  }

  if (x==null || x=="")
  {
    alert("Email must be filled out");
    return false;
  }

  var x=document.forms["contactForm"]["message"].value;

  if (x==null || x=="")
  {
    alert("Message must be filled out");
    return false;
  }
}

Answer 1

您必须在提交时触发事件。像这样：

<form onsubmit="validateForm()">

Answer 2

您如何附加事件监听器？我打赌它是：

<form … onsubmit="validateForm()">

您需要return validateForm()。可是等等！不要添加它。

您的脚本未正确检查有效的电子邮件地址。它只能一次检查一个错误。它会惹恼用户。使用HTML5验证并使用PHP进行备份。

通过应用type="email"，您根本不需要按钮，移动用户将看到特定于电子邮件的键盘（如果有）。在给定支持的情况下，浏览器将对其进行验证。
```
<input type="email" name="email">
```

必填字段应使用required属性。

<input type="text" name="fname" autofocus required>
⋮
<input type="text" name="lname" required>

您的标签也不正确;它们应该包含与其相关的元素，或者提供与元素for匹配的id属性。

您还应该验证您的HTML。不要将<br>放在<li> s之间。

最后，作为一般[客户端] JavaScript提示：

您无需检查value的文本字段的null。
撰写!x代替x == false。

Answer 3

你也可以使用JQuery做这样的事情：

    $( "#formId" ).submit(function( event ) {
  if($("#nameInput").val() == "")
      event.preventDefault();
});

所以基本上，如果nameInput等于空，则取消提交操作

如果您需要，请查看此处：https://api.jquery.com/submit/

祝你好运

无论验证如何，表格都会提交

3 个答案: