We Keep Coding

My input in the form gets reset when I hit submit . I also tried using console.log() to test if my code is correct but it nothing shows in console

I am creating a form that asks for email and password and validates it. If it has any error, it pops on the same line. Below is my javascript code for it. When I fill the form and hit submit, the values get reset. Moreover, I do not see anything in the console. I tried using a random code console.log('Hanee') to test my code but nothing gets generated in the console tab. Could anyone tell me what's the issue here?
Also, here's the link to my login form: http://www2.cs.uregina.ca/~hsb833/215a/login.html
document.getElementById("login-form").addEventListener("submit",validateLogin,false);
function validateLogin(event){
var elements = event.currentTarget;
var emailValue = elements[0].value;
var passValue = elements[1].value;
checkEmail(emailValue);
checkPass(passValue);
}
function checkEmail(emailValue){
var regex_email = /^[/w]+#[a-zA-Z]+?\.[a-zA-Z]{2,3}$/;
var index = emailValue.search(regex_email);
var errorEmail = document.getElementById("errorEmail");
var valid = true;
console.log('Hanee');
if(index != 0){
errorEmail.style.display = 'inline';
}
}
function checkPass(passValue){
var password = document.getElementById("password");
var regex_pass = /[\w]+\S/;
var index = passValue.search(regex_pass);
if(passValue.length < 6){
console.log('password is invalid. Minimum length is 6');
errorPassLen.style.display = 'inline';
}
if(index != 0){
console.log('password is invalid. Please make sure there is no spaces in between');
errorPassFormat.style.display = 'inline';
}
}

form is refreshed after being submitted by default. To prevent that, use event.preventDefault(); in your validateLogin

Here is an example of a form with a username and password, maybe it will suit you and you can customize it for your needs
async function tebeFxhr() {
let logfil = 1;
let sotebe= false;
let tes =(logt) => {
return /^[a-zA-Z0-9]+$/ui.test(logt);
}
tes(gtebe)==true ? logfil++ : alert('Login cannot contain characters or spaces')
let textrf =(rutext) => {
return /[а-я]/i.test(rutext);
}
textrf(stebe)==true ? alert('The password cannot contain Cyrillic characters') : logfil++;
stebe.length < 8 ? alert('Password is very short') : logfil++;
stebe===ftebe ? logfil++ : alert('Enter the password 2 times so that they match')
if (logfil === 5){
const data = {data_0:gtebe, data_1:stebe, data_2:ftebe};
const response = await fetch("/form", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then((response) => {
return response.text();
})
.then((sotebe) => {
console.log(sotebe)
if(sotebe==='error-1'){
console.log('error-1')
}
else{
sotebe =='' ? location.replace("../") : alert(sotebe)
}
});
}
}

When submit event is triggered, all values are sent to server and get reset. If you want to prevent this, use event.preventDefault(); inside the event handling function validateLogin(event). Then, the values are not going to be reset!
Still If you want your values to be empty after submission, try below.
elements.forEach(e => e.value = '');

How can I keep message values in Javascript

I am quite new to Javascript, so I ask for help because somehow I get stuck.
I dont want the input field to become empty after a page refresh - with some copy&paste of code parts I could partially solve it by using sessionStorage + setItem / getItem.
Now I would like the corresponding message also not become empty - at the moment it disappears when I refresh the page. What's the easiest way to get the message? Thank you for your help!
javascript:
let userInput;
let messageUserText;
var validUser = false;
onload = function (event) {
userInput = document.getElementById('usernameInput');
messageUserText = document.getElementById('userMsg');
}
function InputUser() {
const userName = usernameInput.value;
let messageUserName = '';
if (userName === '') {
messageUserName = 'EMPTY';
validUser = false;
} else {
messageUserName = 'OK';
validUser = true;
}
//THIS IS THE MESSAGE I WANT TO KEEP
messageUserText.innerHTML = messageUserName;
}
//KEEP INPUT AFTER SITE REFRESH
document.getElementById("usernameInput").value = getSavedValue("usernameInput");
//SAVE VALUE
function saveValue(e){
var id = e.id;
var val = e.value;
sessionStorage.setItem(id, val);
}
//RETURN SAVED VALUE
function getSavedValue (v){
if (!sessionStorage.getItem(v)) {
return "";
}
return sessionStorage.getItem(v);
}
html:
<body>
<form>
<input type="text" id="usernameInput" oninput="InputUser()" onkeyup="saveValue(this)">
</form>
<!-- THIS IS THE MESSAGE I WANT TO KEEP AFTER REFRESH -->
<div class=""><p id="userMsg"></p></div>
<script src="javascript.js"></script>
</body>

I tried a lot and have partially solved it. Now its able to save the input and associated message to keep them after site refresh.
But I need help to keep the message color and the state of the submit button . I made some tries but cannot get it going. Please can someone tell me how to write the code? I commented it below.
Javascript:
.
.
.
onload = function (event) {
userInput = document.getElementById('usernameInput');
messageUserText = document.getElementById('userMsg');
setPasswordButton = document.getElementById('passwordButton');
}
function InputUser() {
const userName = usernameInput.value;
let messageUserName = '';
if (userName === '') {
messageUserText.style.color = 'red';
messageUserName = 'Message 1';
validUser = false;
} else {
messageUserText.style.color = 'green';
messageUserName = 'Message 2';
validUser = true;
}
messageUserText.innerHTML = messageUserName;
//Save Message to sessionStorage
var idUserMsg = userMsg.id;
var valUserMsg = messageUserText.innerHTML;
sessionStorage.setItem(idUserMsg, valUserMsg);
//Save Message Color (messageUserText.style.color)
//How?
//Button Activation
if (validUser) {
setPasswordButton.disabled = false;
} else {
setPasswordButton.disabled = true;
}
//Save Button state (setPasswordButton.disabled)
//How?
}
//Keep Inputs after site refresh
document.getElementById("usernameInput").value = getSavedValue("usernameInput");
document.getElementById("userMsg").innerHTML = getSavedValue("userMsg");
//Keep Message Color How?
//Keep Button state How?
//Save sessionStorage
function saveValue(e){
var id = e.id;
var val = e.value;
sessionStorage.setItem(id, val);
}
//Return from sessionStorage
function getSavedValue (v){
if (!sessionStorage.getItem(v)) {
return "";
}
return sessionStorage.getItem(v);
}

Problems with an infinite loop

I am doing a login for a page, if I enter index.html it has to redirect me to the login, html.
the issue here is that I am getting an infinite loop and I don't know what my syntax error is, I would appreciate your help!
This is where the error is:
sessionStorage.setItem('usuario',false)
var usuario = sessionStorage.getItem(usuario)
var logueate = window.location.replace('login.html')
if (!sessionStorage.getItem('usuario')) {
logueate;}
my login JS code
function validacion(){
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if (email == "" ) {
document.getElementById("errores").innerHTML = "Campos invalidos";
} else if (password == "") {
document.getElementById("errores").innerHTML = "Campos invalidos";
}
else { window.location.href="index.html"

Does your login.html is alos executing this code, if yes then it is redirecting again and again to login.html page.

How to instantly redirect the user to a new page via router when the user logs in succesfully(password, username are correct)

Via vue.js I've made a login form with a username and password, and set conditions for them. When the user submits the correct username and password I want to redirect them to a new page vie the vue.js Router. So for example if the user is currently located in "localhost8080/", after a successful login I want to immediately send them to "localhost8080/#/profile"
validate() {
var email = document.getElementById("email").value;
var atSign = email.indexOf("#");
var error = document.getElementById("error");
var mistakes = "";
var hasErrors = false;
if (this.newP != this.password){
mistakes += "Entered password is incorrect. ";
hasErrors = true;
}
if (atSign === -1) {
mistakes += "The email is missing an '#' sign.";
hasErrors = true;
}
// console.log(this.newP.length)
if (hasErrors === true) {
error.innerHTML = mistakes;
return false;
} else {
alert("Login confirmed");
return true;
//I realize it's supposed to be here, but I do not know
//how to write it.
}
}

If You using vue-router, better to use programmatic navigation.
Link: https://router.vuejs.org/guide/essentials/navigation.html
if(loginConfirmed) {
this.$router.push({ path: 'dashboard' });
}

How to login successfully with details from local Storage [JavaScript]

So basically i store the details entered by the user in the register form into local HTML storage... And i have checked that the details ARE stored in local storage, however, when i try to log in with such information (username and password) in the login form.... it doesn't work. So how would i be able to log in the login form successfully?? In other words, how would i be able to get the data for username and password entered in the register form (which is stored in local storage) and use that to compare with user's input in login form to validate the login process?? Here are files:

You have to compare them to user and pass, not username and password:
var entry = localStorage.getItem("entry");
console.log("username: " + entry.user + "password: " + entry.pas);
if(username.value == entry.user && password.value == entry.pass) {
alert('You have successfully logged in.');
}
In the browser pres CTRL + SHIFT + I, and if it's not open select "Console"

These lines won't work:
var storedUserName = localStorage.getItem('UserName');
var storedPassWord = localStorage.getItem('PassWord');
var storedEmailAddress = localStorage.getItem('EmailAddress');
savedata() doesn't save each field to its own item, it just saves the entry object as a whole. So you need to retrieve that and parse it.
var entryJSON = localStorage.getItem('entry');
if (!entryJSON) {
alert("Nothing stored!");
return;
}
var entry = JSON.parse(entryJSON);
var storedUserName = entry.user;
var storedPassWord = entry.pass;
var storedEmailAddress = entry.email;
To search allEntries, you need to use a loop:
function validlogin(event) {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var entriesJSON = localStorage.getItem('allEntries');
if (!entriesJSON) {
alert("Nothing stored!");
event.preventDefault();
return;
}
var allEntries = JSON.parse(entriesJSON);
for (var i = 0; i < allEntries.length; i++) {
var entry = allEntries[i];
var storedUserName = entry.user;
var storedPassWord = entry.pass;
var storedEmailAddress = entry.email;
if (username == storedUserName && password == storedPassWord) {
alert("Successfully logged in!");
return;
}
alert('Invalid Username or Password! Please try again.');
event.preventDefault();
window.location="Login.html";
}