Javascript表单验证-JSFIDLE错误

如果任何输入为空，我试图在Submit上显示隐藏的错误列表。我在JSFIDLE中不断收到一个错误，声明“Shell表单未验证”。我检查了语法，它看起来没问题（我是新来的，所以可能遗漏了一些东西）

感谢您的帮助

HTML:

Javascript:

function validateForm()
{

  var errorMsg = '';
  var errorDisplay = document.getElementByID('errors').style;
  var errorList = document.getElementByID('errorList');

    var name = document.getElementByID('A').value;
  var age = document.getElementByID('B').value;
  var city = document.getElementByID('C').value;

  if (name === '') {
    errorMsg += '<li>Name</li>';
  };

  if (age === '') {
    errorMsg += '<li>Age</li>';
  };

  if (city === '') {
    errorMsg += '<li>City</li>';
  };

    if (errorMsg.length != '') {
    errorList.innerHTML = errorMsg;
    errorDisplay.display = 'block';
    return false;
  };

return true;
};

函数validateForm（）
{
var errorMsg=''；
var errorDisplay=document.getElementByID（'errors'）.style；
var errorList=document.getElementByID（'errorList'）；
var name=document.getElementByID（'A'）.value；
var age=document.getElementByID（'B'）。值；
var city=document.getElementByID（'C'）。值；
如果（名称==''）{
errorMsg+='
名称
'；
};
如果（年龄=“”）{
errorMsg+='li>年龄'；
};
如果（城市==''）{
errorMsg+='li>城市'；
};
如果（errorMsg.length！=''）{
errorList.innerHTML=errorMsg；
errorDisplay.display='block'；
返回false；
};
返回true；
};

将表单更改为

<form method="POST" action='/endpoint'  onsubmit="validateForm(event)">
  <label for="A">Name</label>
  ...

将您的表单更改为

<form method="POST" action='/endpoint'  onsubmit="validateForm(event)">
  <label for="A">Name</label>
  ...

一些语法问题：

删除

在所有
如果
块之后：

if (age === '') {

    errorMsg += '<li>Age</li>';
}

将document.getElementByID（）更改为
document.getElementById（）

一些语法问题：

删除
在所有
如果
块之后：

if (age === '') {

    errorMsg += '<li>Age</li>';
}

将document.getElementByID（）更改为
document.getElementById（）

您没有在fiddle中添加jquery，所以添加了基本jquery。希望我做的正是你想要的


函数validateForm（）
{
var errorMsg=''
var errorDisplay=$（“#错误”）；
var errorList=$（“#errorList”）；
errorList.find（“li”）.remove（）；
变量名称=$（“#A”）.val（）；
变量年龄=$（“#B”）.val（）；
var city=$（“#C”）.val（）；
如果（！name）{
errorMsg+='
名称
'；
}
如果（！年龄）{
errorMsg+='li>年龄'；
}
如果（！城市）{
errorMsg+='li>城市'；
}
如果（errorMsg.length>0）{
errorList.append（errorMsg）；
css（“显示”、“块”）；
返回false；
}
其他的
{
返回true；
}
}
#错误{
显示：无；
}

必须填写以下字段：



名称



年龄



城市



您没有在fiddle中添加jquery，所以添加了基本jquery。希望我做的正是你想要的


函数validateForm（）
{
var errorMsg=''
var errorDisplay=$（“#错误”）；
var errorList=$（“#errorList”）；
errorList.find（“li”）.remove（）；
变量名称=$（“#A”）.val（）；
变量年龄=$（“#B”）.val（）；
var city=$（“#C”）.val（）；
如果（！name）{
errorMsg+='
名称
'；
}
如果（！年龄）{
errorMsg+='li>年龄'；
}
如果（！城市）{
errorMsg+='li>城市'；
}
如果（errorMsg.length>0）{
errorList.append（errorMsg）；
css（“显示”、“块”）；
返回false；
}
其他的
{
返回true；
}
}
#错误{
显示：无；
}

必须填写以下字段：



名称



年龄



城市



谢谢！之所以选择此选项，是因为它不仅满足了我的要求，还阻止了表单的提交。谢谢！之所以选择此选项，是因为它不仅满足了我的要求，还阻止了表单的提交。谢谢！这实现了我的目标，只是它允许表单重新提交。使用Steven在下面提到的方法阻止表单提交。谢谢！这实现了我的目标，只是它允许表单重新提交。使用Steven在下面指出的方法阻止表单提交。
if (age === '') {

    errorMsg += '<li>Age</li>';
}

if (errorMsg.length !== 0) {

   errorList.innerHTML = errorMsg;
   errorDisplay.display = 'block';
   return false;
}