JSFiddle - React, Tailwind, and code Playground

by upigilam

HTML

<!-- hello from clara -->
<form id="loginForm" action="#" novalidate>
  <p><input id="username" type="text" name="username" placeholder="Enter username" required/></p>
  <p><input type="text" name="password" placeholder="Enter Password" required/></p>
<!--   <p id='charctersMessage' class='hidden'>Password must be more than 5 characters</p>
   -->  <p><button type="submit">Login</button></p>
  <p><a href="#">Forgot your password?</a></p>
</form>

CSS

.hidden {
  display: hidden;
}

JavaScript

/* lets write a small example how to fetch a particular value from html DOM (Document Object Model)*/
/* for ex: can you fetch value of the element "username" */
var loginElm = document.getElementById('loginForm');
console.log('loginElm :: username ::', loginElm);
console.log('loginElm :: username ::', loginElm.username);

loginElm.addEventListener('submit', function (e) {
	var formValid = true;

	var password = loginElm.password;
  if (password.value.length < 5) {
  	alert('password is less than 5 characters')
    e.preventDefault();
/*     password.removeClass = 'hidden'
    formValid = false;
     */  
  } else {
    password.addClass = 'hidden';
  }

	return formValid;
});

/* if (loginElm) {
  var password = loginElm.password
  check length of string
  if (password.value.length < 5) {
    password.class = ''
  } else {
    password.class = 'hidden'
  }
} */