Javascript 如何让此函数检查空字段？

我想知道为什么validateForm（）函数不起作用。我试图检查表单中的textarea标记中是否有空字段，但它不起作用，只是进入addEntry.php页面，而不执行validateForm函数。以下是我的HTML和Javascript代码：

<form id ="myForms" action="addEntry.php" onsubmit="return validateForm()" method="post" name= "myForm" required>
  <section id="container">
      <h2>Add Blog</h2>
        <aside id = "title">
            <label for="text"> </label>
            <textarea id = "title" type="text" placeholder="Title" name="content"style="height:2em" name="fname"></textarea>
        </aside>
        <aside id = "content">
            <label for="content"> </label>
            <textarea id = "content" type="text" placeholder="Enter your text here..." name="content"style="height:12em" name="fname"></textarea>  
        </aside>
        <article id = "buttons"></article>
            <input id = "submit" type="submit" value = "Post" onclick = "validateForm()">
            <input class = "reset" type = "button" onclick = "myFunction()" value = "Clear"> <br>
    </section>
</form>
    
<script> 
    
function myFunction() {
  var r = confirm("Do you want to clear the blog entry?");
  if (r == true) {
  document.getElementById("myForms").reset();
  alert("The fields were cleared!");
  } else {
    alert("No fields were cleared!");
  }
}
    
function validateForm() {
  var x = document.getElementsByName["myForm"]["fname"].value;
  alert("test");
  event.validateForm()
  if (x == "" || x == null) {
    alert("Name must be filled out");
    return false;
  }
}
</script>

添加博客


函数myFunction（）{
var r=confirm（“是否要清除博客条目？”）；
如果（r==true）{
document.getElementById（“myForms”）.reset（）；
警报（“字段已清除！”）；
}否则{
警报（“未清除任何字段！”）；
}
}
函数validateForm（）{
var x=document.getElementsByName[“myForm”][“fname”].value；
警报（“测试”）；
event.validateForm（）
如果（x==“”| | x==null）{
警告（“必须填写姓名”）；
返回false；
}
}

action=“addEntry.php”：
表单操作将始终将数据发送到“addEntry.php”-即使验证失败。您应该使用

document.getElementById（“myForm”）.submit（）验证成功完成后！使用带有type=“submit”的按钮/输入时，请阅读about event.preventDefault（）

text区域名称：
您有多个具有两个名称的textarea元素，并且它们的名称相同！（内容，内容，fname，fname）。。。始终使用唯一的名称

text区域id:
您有多个元素共享同一ID！（标题、标题、内容、内容）。。。始终使用唯一ID或重用类。 对于JS，最好使用ID

ID=“myTitleTextarea”

来选择唯一的元素。使用PHP时，必须使用

name=“mycontentextarea”

引用输入（您使用POST方法so-

$title=$\u POST['mycontentextarea']；

）

输入类型='submit'：
具有提交类型的输入/按钮将始终将数据“提交”到表单的“操作”。这可能会阻止验证的发生

input class='reset'onclick='myFunction（）'：
任何类型为='reset'的输入或按钮都将重置表单-不需要函数'myFunction（）'（除非您希望提示并确保用户希望重置）

validateForm（）事件：
函数validateForm（）未传递事件。。。不需要event.validateForm（）-如果有效的话，这将无限循环

validateForm（）变量x： 使用更合理的名称，如

var fnameValue=…

。使用JS选择元素时，使用ID而不是名称可能更容易-

getElementById（'content'）

document.getElementsByName[“myForm”][“fname”]。值： TypeError:document.getElementsByName.myForm未定义

测试时使用开发者控制台！！！检查DevTools，因为这将通知您并可能解释您遇到的任何错误

Chrome

Firefox

将

required=”“

属性添加到用户必须填写的字段中，以便在用户输入一些文本之前不会发布表单！