CODEWITHSUNDEEP
javascriptdomfrontenddom-manipulation
Hanee Solanki
Hanee Solanki

Reputation: 23

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';
    
    }

}

Upvotes: 1

Views: 1167

Answers (3)

user17773570
user17773570

Reputation:

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)
        }
         
      });
  }
  }

Upvotes: 1

soheethewebdeveloper
soheethewebdeveloper

Reputation: 81

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 = '');

Upvotes: 0

Emre Karakuz
Emre Karakuz

Reputation: 91

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

Upvotes: 1

Related Questions