Question

如果任何输入为空，我试图在提交时显示隐藏的错误列表。我一直在jsFiddle中收到错误说明＆＃34; Shell表单没有验证。＆＃34;我检查了我的语法，它看起来没问题（我是新的，所以我可能会遗漏一些东西）。

感谢任何帮助！

HTML：

<html>
<body>

<div id="errors">
  <p>The following field(s) must be filled out:</p>
  <ul id="errorList">

  </ul>
</div>

<form method="POST" onsubmit="validateForm()">
  <label for="A">Name</label>
    <input id="A" name="A" type="text">
  <br><br>
  <label for="B">Age</label>
    <input id="B" name="B" type="text">
  <br><br>
  <label for="C">City</label>
    <input id="C" name="C" type="text">
   <br><br>
   <input type="submit" value="Submit">
</form>
</body>
</html>

CSS：

#errors {
  display:none;
}

使用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;
};

Answer 1

将表单更改为

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

然后在脚本中您需要将document.getElementByID(...)更改为document.getElementById(...)（“Id”而不是“ID”）并对传入的事件执行preventDefault（）以停止默认表单提交过程

function validateForm(event) {
  ...
  if(errorMsg.length){
    ...
    event.preventDefault();
  }
  ...

https://jsfiddle.net/stevenkaspar/2mpg7mbj/2/

Answer 2

一些语法问题：

在所有;块之后移除if：

if (age === '') {

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

errorMsg.length返回一个数字，而不是字符串。

if (errorMsg.length !== 0) {

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

将document.getElementBy ID （）更改为document.getElementById()

Demo with all fixed issues

Answer 3

你还没有在小提琴中添加jquery，所以添加了基本的jQuery。希望我完全按照你的意愿完成。

＆＃13;

function validateForm()
{
  var errorMsg = ''
  var errorDisplay = $("#errors");
  var errorList = $("#errorList"); 
  errorList.find("li").remove();
	var name = $("#A").val();
  var age = $("#B").val();
  var city = $("#C").val();
  if (!name) {
  	errorMsg += '<li>Name</li>';
  }
  
  if (!age) {
  	errorMsg += '<li>Age</li>';
  }
  
  if (!city) {
  	errorMsg += '<li>City</li>';
  }

	if (errorMsg.length > 0) {
  	errorList.append(errorMsg);
  	errorDisplay.css("display","block");
    return false;
  }
  else
  {
  	return true;
  }
}

＆＃13;

#errors {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>

<div id="errors">
  <p>The following field(s) must be filled out:</p>
  <ul id="errorList">
    
  </ul>
</div>

<form method="POST" onsubmit="return validateForm()">
  <label for="A">Name</label>
    <input id="A" name="A" type="text">
  <br><br>
  <label for="B">Age</label>
    <input id="B" name="B" type="text">
  <br><br>
  <label for="C">City</label>
    <input id="C" name="C" type="text">
   <br><br>
   <input type="submit" value="Submit">
</form>
</body>

＆＃13;

Javascript表单验证 - jsFiddle错误

3 个答案: