Simple HTML form Auth

by Yashwanth M

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id='container'>
  <h3><span>Sign In</span></h3>
  <hr />

<form action="javascript:document.funtionClick();">
  <div>
  <label>Email:</label>
  <input type="text" id="email" value="" placeholder="[email protected]" />
  <br />
  <span id="emailerr" style="color: red; visibility: hidden;">
  Invalid Email</span>
  </div>

  <div>
  <label>Password:</label>
  <input type="text" id="pass" value="" placeholder="*****" />
  <br />
  <span id="passerr" style="color: red; visibility: hidden;">
  Invalid Pass</span>
  </div>
  
  <div><button>submit</button></div>
</form>
</div>

CSS

div.container, form {
  width: 50%;
  outline: 2px;
}

h3 span {
  text-align: center;
  color: blue;
}

span#passerr, span#emailerr {
  text-align: right;
  /* float: right; */
}

JavaScript

document.funtionClick = function() {
 var emailELE = document.getElementById('email').value;
 var emailERR = document.getElementById('emailerr');
 var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
 var passwordFormat = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d @$!%*#?&]{8,}$/;
 // https://stackoverflow.com/a/21456918/5081877
 if (emailELE == undefined || emailELE == '' || !mailformat.test(emailELE) ) {
   	emailERR.style.visibility = 'visible';
 } else {
    emailERR.style.visibility= 'hidden';
 }

 var passELE = document.getElementById('pass').value;
 var passERR = document.getElementById('passerr');
 if (passELE == undefined || passELE == '' || !passwordFormat.test(passELE)) {
   	passERR.style.visibility = 'visible';
 } else {
    passERR.style.visibility= 'hidden';
 }
}

/*
$('form').on('submit', function (e) {
console.log('Form is ready to submit...');
	$('#email').value = "hai";
});
*/