JavaScript form validation not working as intended

Question

Good morning,

I'm working on some simple form validation. Whenever I submit my form, the error message appears, but I can repeatedly spam the button for numerous error messages. Is there a way I can change this to only show the error message once? I've also noticed that even if I populate both fields it will still flash quickly in my console with the error log but not show the error.

Can anyone tell me what I'm doing wrong here?

	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

You must be clearing the contents of your container to avoid duplication of elements. Below are few things to note:

• You were trying to get userame instead of username in your fiddle. May be spelling mistake.
• Keep input type=submit instead of button
• Pass the event to your validateMe function to prevent the default action of post.
• Move the variables within the function to get the actual value all the time

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

Edit - if condition was failing and have updated it accordingly

Answer 2

this is full work code

var uname = "";
var pword = "";

function validateMe(e) {
  e.preventDefault();
  uname = document.forms['signIn']['username'].value;
  pword = document.forms['signIn']['password'].value;
  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;
  }
return true;
}

<form id="signIn">
  <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(event);">Sign In</button>
    </div>
  </div>
</form>