I am making a basic login webpage for class project. I want to check the password and confirm password should match. If they are not same then it should give an alert message. But here I don't get that error message.
<!DOCTYPE html> <html> <head> <title>Login Here!!</title> <link rel="icon" type="image/ico" href="pics/down.jpg" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> </head> <style> form{ border: 2px solid grey; border-radius: 5%; padding: 20px 50px; margin-top: 5%; background-color:#f9f6fa; }
text-align: center;
}
input[type="submit"]{
margin-left: 35%;
border-radius: 75%;
padding: 2% 10% ;
}
</style>
<body class="jumbotron container-fluid">
<header style="text-align: center;"><h1 style="font-family:'Roboto Slab', serif;">Login Here!! </h1></header>
<main class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<form id="login" action = '' target="_blank">
<div id="img">
<img src="pics/image.png" width="100px" height="100px">
</div>
<div class="form-group">
<label for="name">Username: </label>
<input type="text" id="name" class="form-control" name="name" placeholder="Enter username here...">
</div>
<div class="form-group">
<label for="paswd">Password :</label>
<input type="password" id="paswd" name="paswd" class= "form-control">
</div>
<div class="form-group">
<label for="repeat-paswd">Confirm Password :</label>
<input type="password" id="confrm_paswd" name="confrm_paswd" class= "form-control">
</div>
<div class="form-group">
<input type="checkbox" name="rembr_me" checked> Remember Me
</div>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
<p id="thank_you" hidden>You are now signing in</p>
</main>
<script>
let form = document.querySelector('#login');
let uname = document.getElementById('name').value;
let passwd = document.getElementById('paswd').value;
let conf_passwd = document.getElementById('confrm_paswd').value;
if(passwd != conf_passwd)
alert('Password does not match');
form.onsubmit = function(){
if(uname == '' && (passwd == '' && conf_passwd == '' ))
alert('One or more fields are empty');
}
</script>
</body></html>