为什么我的表单验证不能正确工作？

问题描述：

我为一个项目创建一个表单，我必须设置一个验证规则，这样如果没有输入任何名字，那么会出现一个提醒告诉用户“名称必须填写”我知道这可能是一个愚蠢的菜鸟的错误，但我不太确定为什么它不工作，因为我是新来的JavaScript。为什么我的表单验证不能正确工作？

我没有把CSS包括进去，因为它是不必要的。我也没有把这些信息发布到任何东西。

<head> 
 
<script> 
 
function validateForm() { 
 
    var x = document.forms["myForm"]["fname"].value; 
 
    if (x == "") { 
 
     alert("Name must be filled out"); 
 
     return false; 
 
\t \t </script> 
 
</head>

<body> 
 
<div class="form_settings"> 
 
      <form name="MyForm" onSubmit="return validateForm()" 
 
method="post"> 
 
      <p><span>Name</span><input class="contact" type="text" 
 
    name="fname" value="" /></p> 
 
      <p><span>Email Address</span><input class="contact" type="text" 
 
    name="your_email" value="" /></p> 
 
      <p><span>Re type Email Address</span><input class="contact" 
 
type="text" name="your_email" value="" /></p> 
 
      <p><span>Message</span><textarea class="contact textarea" 
 
rows="8" cols="50" name="your_enquiry"></textarea></p> 
 
      <p style="padding-top: 15px"><span>&nbsp;</span><input 
 
class="submit" type="submit" name="contact_submitted" value="Submit" /></p> 
 
      </form> 
 

 
</body>

语法是完全错误的。检出浏览器的控制台。 – SaidbakR

你有两个缺少右花括号的语法错误。另外，名称区分大小写，所以'document.forms [“MyForm”] ...'。 – RobG

答

试试这个：

function validateForm() { 
 
    var x = document.getElementsByClassName("contact")[0].value; 
 
    if (x == "") { 
 
     alert("Name must be filled out"); 
 
    } 
 

 
    return false; 
 
}

<form name="MyForm" onsubmit="validateForm();"> 
 
     <p><span>Name</span> 
 
      <input class="contact" type="text" name="fname" value="" /> 
 
     </p> 
 
     <p><span>Name</span><input class="contact" type="text" name="fname" value="" /></p> 
 
     <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> 
 

 
     <p><span>Re type Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> 
 

 
     <p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p> 
 

 
     <p style="padding-top: 15px"><span>&nbsp;</span> 
 
      <input class="submit" type="submit" value="submit" /> 
 
     </p> 
 
    </form>

为什么我的表单验证不能正确工作？

相关推荐