Jump to content
Please Use CODE Tags

Login Form Change Colors

Ryois
By Ryois
in Programming
 Share
Go to solution Solved by leodaniel,

Use Javascript to make a request and check the email...

I would consider this as not best practice, because an attaquer can verify if the email is valid... I would always only return that the combination of email and password didn't match ;)  

/* Remove Success and error classes */
document.getElementById('email').classList.remove('error','success');

/* I will use the Axios Library */
axios.post('/verify_email',{
    email:'from the input'
  })
  .then(function (response) {
    //console.log(response);
    //Server Responded with an HTTP Status 200
  
    // Add a Class to the element
    document.getElementById('email').classList.add('success');
  })
  .catch(function (error) {
    // console.log(error);
    document.getElementById('email').classList.add('error');
});

If it's just about validating the email format, I think this regex will cover you needs... I used it in an older project, I m not up to date if it covers the email format requirements up to 100%... but it should be fine 

function validateEmail(email){
   let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
  return regex.test(email);
}

document.getElementById('email').addEventListener('change',function(e){
  /* Reset */
  e.target.classList.remove('error','success');

  if(validateEmail(e.target.value)){
     e.target.classList.add('success');
  }
  else{
   	e.target.classList.add('error');
  }
});

 

Posted

Hello, I am trying to make a login page that with javascript will verify if the email is in a correct email format. If it is a valid email format the box will have turn to a green border color and if it is in a invalid format the box will turn red and will disbale the submit button. Right now I have two files, index.html and log.php 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Please Login</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form action="log.php" method="POST">
      <input name="email" id="email" type="email" />
      <input name="password" id="passowrd" type="password" />
      <input type="submit" name="submit" value="Submit">
    </form>
  </body>
</html>
<?php
if(isset($_POST['email']) && isset($_POST['password'])) {
    $data = 'Email: ' .  $_POST['email'] . ' Password: ' . $_POST['password'] .$
    $ret = file_put_contents('mydata.txt', $data, FILE_APPEND | LOCK_EX);
    if($ret === false) {
        die('An error occured');
    }
    else {
        echo "Success";
    }
}
else {
   die('no post data to process');
}
?>

I know that logging the data to a txt file is not secure but later on I will implement either google firebase or MySQL. Thanks!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Use Javascript to make a request and check the email...

I would consider this as not best practice, because an attaquer can verify if the email is valid... I would always only return that the combination of email and password didn't match ;)  

/* Remove Success and error classes */
document.getElementById('email').classList.remove('error','success');

/* I will use the Axios Library */
axios.post('/verify_email',{
    email:'from the input'
  })
  .then(function (response) {
    //console.log(response);
    //Server Responded with an HTTP Status 200
  
    // Add a Class to the element
    document.getElementById('email').classList.add('success');
  })
  .catch(function (error) {
    // console.log(error);
    document.getElementById('email').classList.add('error');
});

If it's just about validating the email format, I think this regex will cover you needs... I used it in an older project, I m not up to date if it covers the email format requirements up to 100%... but it should be fine 

function validateEmail(email){
   let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
  return regex.test(email);
}

document.getElementById('email').addEventListener('change',function(e){
  /* Reset */
  e.target.classList.remove('error','success');

  if(validateEmail(e.target.value)){
     e.target.classList.add('success');
  }
  else{
   	e.target.classList.add('error');
  }
});

 

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
3 minutes ago, leodaniel said:

Use Javascript to make a request and check the email...

I would consider this as not best practice, because an attaquer can verify if the email is valid... I would always only return that the combination of email and password didn't match ;)  


/* Remove Success and error classes */
document.getElementById('email').classList.remove('error','success');

/* I will use the Axios Library */
axios.post('/verify_email',{
    email:'from the input'
  })
  .then(function (response) {
    //console.log(response);
    //Server Responded with an HTTP Status 200
  
    // Add a Class to the element
    document.getElementById('email').classList.add('success');
  })
  .catch(function (error) {
    // console.log(error);
    document.getElementById('email').classList.add('error');
});

If it's just about validating the email format, I think this regex will cover you needs... I used it in an older project, I m not up to date if it covers the email format requirements up to 100%... but it should be fine 


function validateEmail(email){
   let regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
  return regex.test(email);
}

document.getElementById('email').addEventListener('change',function(e){
  /* Reset */
  e.target.classList.remove('error','success');

  if(validateEmail(e.target.value)){
     e.target.classList.add('success');
  }
  else{
   	e.target.classList.add('error');
  }
});

 

Yay this works! I tried this before and it didn't work. Thanks!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×