I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>intern.local</title>
<link rel="stylesheet"><link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div class="outer">
<div class="inner one"
id="box_one">
<h1 class="main">
Welcome to intern.local
</h1>
<h3 id='login_1'>
Enter details and login to continue.
</h3>
</div>
<div class="inner two"
id="box_two">
<div class="head">
<h1> Welcome</h1>
<h2>Please Login</h2>
<div class="error">
Please Enter valid Password.
</div>
<div id="login"
class="login">
<form class="login_form" onsubmit="validate()">
<input type="text"
pattern="^w+([.-]?w+)*@docquity.com"
id="uname"
class="inp uname"
name="uname"
placeholder="Username" required><br>
<input type="password"
minlength="6"
id="pass"
class="inp pwd"
name="pass"
placeholder="Password" required>
<small id="pass_error"></small>
<input type="submit"
id="smt"
value="Submit"
class="btn sbmt">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css code
body {
margin:0px;
height:100%;
border: none;
padding:0px;
}
.inner{
float:left;
width: 50%;
height: 100vh;
}
.one {
background-color:cornsilk;
}
.two{
/*background: rgb(63,94,251);*/
background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
padding: 0%;
border: 0%;
margin: 0%;
color: cornsilk;
}
.head{
height: auto;
padding-top: 15%;
}
.head h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
}
.head h2{
text-align: center;
}
form {
margin: 0 auto;
}
.login {
text-align: center;
}
.inp {
border: none;
background: none;
box-shadow: 0px 2px 0px 0px white;
width: 50%;
color:blanchedalmond;
font-size: 25px;
outline: none;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding-left: 2%;
}
.inp:focus:invalid{
box-shadow: 0px 2px 0px 0px red;
}
small {
color: red;
font-weight: bold;
}
.pwd {
margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
color: blanchedalmond;
}
.btn {
align-items: center;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #000102;
display: inline-flex;
height: 48px;
justify-content: center;
padding: 2px 24px;
width: 30%;
font-size: 25px;
}
.sbmt:hover{
background-color: darkslategray;
color: floralwhite;
}
.main {
margin-top: 20%;
text-align: center;
font-size: 60px;
background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.one h3 {
text-align: center;
color:darkslategray;
}
.error_message{
background-color: red;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
.error {
display: none;
}
javascript code
function mail_velidate(mail){
var mail_pattern = /^w+([.-]?w+)*@docquity.com/;
if(mail.match(mail_pattern))
{
return true;
}
else{
return false;
}
}
function password_check(pass){
var pass_regex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
if (pass.match(pass_regex)){
return true;
}
else{
return false;
}
}
const mail = document.getElementById("uname");
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("uname");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Give valid docquity mail id");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
function validate(){
var user = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
if(password_check(pass)){
document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
document.getElementById('box_two').style.display = 'none';
document.getElementById('box_one').style.width = '100%';
}
else{
document.getElementsByClassName("error")[0].className = "error_message";
}
}
the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.