JavaScript 表单验证未按预期工作

Question

早上好，

我正在研究一些简单的表单验证。每当我提交表单时，都会出现错误消息，但我可以反复向按钮发送大量错误消息。有没有办法可以将其更改为仅显示一次错误消息？我还注意到，即使我填充这两个字段，它仍然会在控制台中快速闪烁错误日志，但不会显示错误。

谁能告诉我我在这里做错了什么？

	var uname = document.forms['signIn']['userame'].value;
	var pword = document.forms['signIn']['password'].value;

	function validateMe (e) {
		if (uname.length || pword.length < 1 || '') {
		var container = document.getElementById('error-container');
		var errorMsg = document.createElement('div');
		errorMsg.className = 'error-message';
		errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>';
		container.appendChild(errorMsg);
		console.log('An error occured');
		return false;
		} 
	 
	}

<form id="signIn" action='#'>
				<div class="boxed left-floater">
					<h1 class="heading-large margin-top">Sign in</h1>
					<div id="error-container"></div>
					<div class="form-group">
						<label class="form-label-bold" for="username">Username</label>
						<input class="form-control log-in-form-control" id="username" name="username" type="text">
					</div>
					<div class="form-group">
						<label class="form-label-bold" for="password">Password</label>
						<input class="form-control log-in-form-control" id="password" type="password" name="password">
					</div>
					<div>
						<a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
						<button class="button clear right-floater" type="submit" onclick="validateMe();">Sign In</button>
					</div>
				</div>
			</form>

Fiddle

Answer 1

您必须清除容器的内容以避免元素重复。以下是一些需要注意的事项:

• 您试图在 fiddle 中获取用户名而不是用户名。可能是拼写错误。
• 保留input type=submit而不是button
• 将事件传递给您的validateMe函数以阻止默认的post操作。
• 在函数内移动变量以始终获取实际值

function validateMe(e) {
  e.preventDefault();
  var uname = document.forms['signIn']['username'].value;
  var pword = document.forms['signIn']['password'].value;
  var container = document.getElementById('error-container');
  container.innerHTML = ''; //Clear the contents instead of repeating it
  if (uname.length < 1 || pword.length < 1) {
    var errorMsg = document.createElement('div');
    errorMsg.className = 'error-message';
    errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>';
    container.appendChild(errorMsg);
    console.log('An error occured');
    return false;
  }
}

<form id="signIn" action='#'>
  <div class="boxed left-floater">
    <h1 class="heading-large margin-top">Sign in</h1>
    <div id="error-container"></div>
    <div class="form-group">
      <label class="form-label-bold" for="username">Username</label>
      <input class="form-control log-in-form-control" id="username" name="username" type="text">
    </div>
    <div class="form-group">
      <label class="form-label-bold" for="password">Password</label>
      <input class="form-control log-in-form-control" id="password" type="password" name="password">
    </div>
    <div>
      <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
      <input value="Sign In" class="button clear right-floater" type="submit" onclick="validateMe(event);" />
    </div>
  </div>
</form>

<强> Updated Fiddle

编辑 - 如果条件失败并已相应更新