<div class="container login p-5 w-50 mb-3">
<div class="row">
<form name="loginForm" class="col-sm-6 offset-sm-3" novalidate auto-complete="off">
<div class="text-center mb-5"><i class="fa fa-sign-in-alt fa-3x"></i></div>
<div class="form-row">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="username-addon">👤</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
</div>
</div>
<!-- <div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="emailId-addon">✉</span>
</div>
<input type="email" class="form-control" placeholder="Email" aria-label="email" aria-describedby="emailId-addon">
</div> -->
<div class="form-row">
<div class="input-group mb-5">
<div class="input-group-prepend">
<span class="input-group-text" id="password-addon">🔑</span>
</div>
<input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
</div>
</div>
<input type="button" class="btn btn-outline-light btn-block" value="Login" />
</form>
</div>
</div>
<div class="container signup p-5 w-50 mb-5">
<form name="signupForm" novalidate auto-complete="off">
<div class="text-center mb-5"><i class="fas fa-user-plus fa-3x"></i></div>
<div class="form-group">
<label for="name" class="sr-only">Full Name</label>
<input type="text" class="form-control" placeholder="Fullname" id="name" required />
<div class="invalid-feedback">Full name is mandatory!!!</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="username-addon">👤</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="emailId-addon">✉</span>
</div>
<input type="email" class="form-control" placeholder="Email" aria-label="email" aria-describedby="emailId-addon">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="password-addon">🔑</span>
</div>
<input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
</div>
<div class="input-group mb-5">
<div class="input-group-prepend">
<span class="input-group-text" id="mobile-addon">📞</span>
</div>
<input type="tel" class="form-control" placeholder="Mobile No." aria-label="mobile" aria-describedby="mobile-addon">
</div>
<input type="button" class="btn btn-outline-light btn-block" value="Register" />
</form>
</div>
<!-- Login Form - Without Input field icons -->
<!-- <div class="container login p-5 w-50 mb-3">
<form name="loginForm" novalidate auto-complete="off">
<div class="text-center mb-5"><i class="fa fa-sign-in-alt fa-3x"></i></div>
<div class="form-group">
<label for="usernameId">Username</label>
<input type="text" class="form-control" id="usernameId" name="username" required />
<div class="invalid-feedback">Username is mandatory!!!</div>
</div>
<div class="form-group">
<label for="emailId">Email ID</label>
<input type="email" class="form-control" id="emailId" name="email" required />
<div class="invalid-feedback">Email ID is mandatory!!!</div>
</div>
<div class="form-group">
<label for="passwordId">Password</label>
<input type="password" class="form-control" id="passwordId" name="password" required />
<div class="invalid-feedback">Password is mandatory!!!</div>
</div>
<input type="button" class="btn btn-success btn-block" value="Login" />
</form>
</div> -->
<!-- Signup Form - without input icons -->
<!-- <div class="container signup p-5 w-50 mb-5">
<form name="signupForm" novalidate auto-complete="off">
<div class="text-center mb-5"><i class="fas fa-user-plus fa-3x"></i></div>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" class="form-control" id="name" required />
<div class="invalid-feedback">Full name is mandatory!!!</div>
</div>
<div class="form-group">
<label for="usernameId">Username</label>
<input type="text" class="form-control" id="usernameId" name="username" required />
<div class="invalid-feedback">Username is mandatory!!!</div>
</div>
<div class="form-group">
<label for="emailId">Email ID</label>
<input type="email" class="form-control" id="emailId" name="email" required />
<div class="invalid-feedback">Email ID is mandatory!!!</div>
</div>
<div class="form-group">
<label for="passwordId">Password</label>
<input type="password" class="form-control" id="passwordId" name="password" required />
<div class="invalid-feedback">Password is mandatory!!!</div>
</div>
<div class="form-group">
<label for="telNumber">Telephone<span class="text-white">(*<small>Optional</small>)</span></label>
<input type="tel" class="form-control" />
</div>
<input type="button" class="btn btn-primary btn-block" value="Register" />
</form>
</div> -->
const loginForm = document.querySelector("form[name='loginForm']");
const signupForm = document.querySelector("form[name='signupForm']");
const username = document.querySelector("#usernameId");
const email = document.querySelector("#emailId");
const password = document.querySelector("#passwordId");
window.addEventListener(
"load",
function (e) {
if (loginForm) {
loginForm.addEventListener(
"submit",
function (event) {
console.log(loginForm);
if (!loginForm.checkValidity()) {
event.preventDefault();
event.stopPropagation();
loginForm.classList.add("was-validated");
}
},
false
);
}
if (signupForm) {
signupForm.addEventListener(
"submit",
function (event) {
console.log(signupForm);
if (!signupForm.checkValidity()) {
event.preventDefault();
event.stopPropagation();
signupForm.classList.add("was-validated");
}
},
false
);
}
},
false
);