Can someone help me,and fix the animation problem in my javascript?

user_11370858 0
Viewed 106

I'm working on a registration form,and I have a problem with an input field animation,I want to change the color of the input field bottom border to red and the icons color,when the user enter data,which isn't correct for the requirements.This is halfly working with the icons,because they doesn't have javascript animation function,but not working with the fields border colors. So,when the user click on the input field,I want to play the animation,and make the border green,when the user type something like an "a" character,then the border be red,and if the data match with all of the requirements,then be the border green again. I think the problem is somewhere in the animation script,at the 271 line,because if I delete that,the border color change start working well,I think the two javascript conflict each other,it's just a bit hint for you. I don't have too much experience in web development.

Here is the code: https://jsfiddle.net/hgf2346v/

function Showfunction() {
  var eye = document.getElementById("eye");
  var eye2 = document.getElementById("eye2");
  var pass = document.getElementById("pass");

  if (pass.type === "password") {
    pass.type = "text";
    eye.style.display = "none";
    eye2.style.display = "block";
  } else {
    pass.type = "password";
    eye2.style.display = "none";
    eye.style.display = "block";
  }
}

function hiddenscript() {
  var eye = document.getElementById("eye");
  eye.style.display = "block";
}

$(document).ready(function() {
  // set initially button state hidden
  // use keyup event on email field
  $("#email").keyup(function() {
    if (validateEmail()) {
      // if the email is validated
      // set input email border green
      $('#inputemail').css('border-bottom', 'solid 2px #38d39f');
      $('#iconmail').css('color', '#38d39f');
      $("#emailMsg").html("<p class='text-danger'></p>");
      $(':input[type="submit"]').prop('disabled', false);



      // and set label 
    } else {
      // if the email is not validated
      // set border red
      $('#inputemail').css('border-bottom', 'solid 2px #e50914');
      $('#iconmail').css('color', '#e50914');
      $("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>");
      $(':input[type="submit"]').prop('disabled', true);

    }

  });

  $("#pass").keyup(function() {
    // check
    if (validatePassword()) {
      // set input password border green
      $('#inputpass').css('border-bottom', 'solid 2px #38d39f');
      $('#iconpass').css('color', '#38d39f');
      $("#passMsg").html("<p class='text-danger'></p>");
      $(':input[type="submit"]').prop('disabled', false);
      //set passMsg 

    } else {
      $('#inputpass').css('border-bottom', 'solid 2px #e50914');
      $('#iconpass').css('color', '#e50914');
      $("#passMsg").html("<p class='text-danger'>Password must contain at least 1 digit,<br>and need to contain at least 8 character.</p>");
      $(':input[type="submit"]').prop('disabled', true);
    }

  });

  $("#firstName").keyup(function() {
    // check
    if (validateFirstName()) {
      // set input password border green
      $('#inputfirstname').css('border-bottom', 'solid 2px #38d39f');
      $('#iconfirstname').css('color', '#38d39f');
      $("#firstMsg").html("<p class='text-danger'></p>");
      $(':input[type="submit"]').prop('disabled', false);
      //set passMsg 

    } else {
      $('#inputfirstname').css('border-bottom', 'solid 2px #e50914');
      $('#iconfirstname').css('color', '#e50914');
      $("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long.</p>");
      $(':input[type="submit"]').prop('disabled', true);
    }

  });

  $("#lastName").keyup(function() {
    // check
    if (validateLastName()) {
      // set input password border green
      $('#inputlastname').css('border-bottom', 'solid 2px #38d39f');
      $('#iconlastname').css('color', '#38d39f');
      $("#lastMsg").html("<p class='text-danger'></p>");
      $(':input[type="submit"]').prop('disabled', false);
      //set passMsg 

    } else {
      $('#inputlastname').css('border-bottom', 'solid 2px #e50914');
      $('#iconlastname').css('color', '#e50914');
      $("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long.</p>");
      $(':input[type="submit"]').prop('disabled', true);
    }

  });






});

function validateEmail() {
  // get value of input email
  var email = $("#email").val();
  // use reular expression
  var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  if (reg.test(email)) {
    return true;
  } else {
    return false;
  }

}

function validatePassword() {
  var pass = $("#pass").val();

  var reg = /^(?=.*\d)(?=.*[a-z])[0-9a-zA-Z]{8,}$/

  if (reg.test(pass)) {
    return true;
  } else {
    return false;
  }

}

function validateFirstName() {
  //get input password value
  var first = $("#firstName").val();
  // check it s length
  if (first.length > 2) {
    return true;
  } else {
    return false;
  }

}

function validateLastName() {
  //get input password value
  var last = $("#lastName").val();
  // check it s length
  if (last.length > 2) {
    return true;
  } else {
    return false;
  }
}

const inputs = document.querySelectorAll(".input");


function addcl() {
  let parent = this.parentNode.parentNode;
  parent.classList.add("focus");
}

function remcl() {
  let parent = this.parentNode.parentNode;
  if (this.value == "") {
    parent.classList.remove("focus");
  }
}


inputs.forEach(input => {
  input.addEventListener("focus", addcl);
  input.addEventListener("blur", remcl);
});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 7rem;
  padding: 0 2rem;
}

.login-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.container {
  grid-template-columns: none;
}

form {
  padding: 40px;
  background-color: #efefee;
  width: 460px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px;
  border-radius: 5px;
}

#eye {
  position: fixed;
  margin-left: 685px;
  margin-top: ;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  display: none;
}

#eye2 {
  position: fixed;
  margin-left: 685px;
  margin-top: ;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  display: none;
}

.login-content h2 {
  margin: 15px 0;
  color: #333;
  text-transform: uppercase;
  font-size: 2.9rem;
  margin-bottom: 105px;
}

.login-content .input-div {
  position: relative;
  display: grid;
  grid-template-columns: 7% 93%;
  margin: 45px 0;
  padding: 5px 0;
  border-bottom: 2px solid #d9d9d9;
}

.login-content .input-div.one {
  margin-top: 0;
}

.i {
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.i i {
  transition: .3s;
}

.input-div>div {
  position: relative;
  height: 45px;
}

.input-div>div>h5 {
  /* //Az inputnak a szövege(Username,password) */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 18px;
  transition: .3s;
}

.input-div:before,
.input-div:after {
  content: '';
  position: absolute;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: #38d39f;
  transition: .4s;
}

.input-div:before {
  right: 50%;
}

.input-div:after {
  left: 50%;
}

.input-div.focus:before,
.input-div.focus:after {
  width: 50%;
}

.input-div.focus>div>h5 {
  top: -10px;
  font-size: 15px;
}

.input-div.focus>.i>i {
  color: #38d39f;
}

.input-div>div>input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  padding: 0.5rem 0.7rem;
  font-size: 1.2rem;
  color: #555;
  font-family: 'poppins', sans-serif;
}

.input-div.pass {
  margin-bottom: 4px;
}

a {
  display: block;
  text-align: right;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: .3s;
}

a:hover {
  color: #38d39f;
  text-decoration: underline;
}

.h6 {
  font-size: 16px;
  display: block;
  text-align: right;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: .3s;
}

.pasw {
  width: 70%;
}

.btn {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  outline: none;
  border: none;
  background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
  background-size: 200%;
  font-size: 1.2rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  margin: 1rem 0;
  cursor: pointer;
  transition: .5s;
}

.btn:hover {
  background-position: right;
}

@media screen and (max-width: 1050px) {
  .container {
    grid-gap: 5rem;
  }
}

@media screen and (max-width: 1000px) {
  form {
    width: 420px;
  }
  .login-content h2 {
    font-size: 2.4rem;
    margin: 8px 0;
    margin-top: 5px;
  }
  #eye {
    margin-left: 545px;
  }
  #eye2 {
    margin-left: 545px;
  }
}

@media screen and (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
  }
  .img {
    display: none;
  }
  .wave {
    display: none;
  }
  .login-content {
    justify-content: center;
  }
}

.login-content {
  justify-content: center;
}

.text-danger {
  position: fixed;
  text-align: left;
  margin: 0;
  margin-top: 58;
  font-size: 14px;
  color: #e50914;
}
<div class="container">

  <div class="login-content">
    <form method="POST">

      <h2 class="title">Sign Up</h2>

      <div class="input-div one" id="inputfirstname">
        <div class="i">
          <i class="fas fa-user" id="iconfirstname"></i>
        </div>
        <div class="div">
          <h5>First Name</h5>
          <input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required>
          <span id="firstMsg"></span>
        </div>
      </div>


      <div class="input-div lastname" id="inputlastname">
        <div class="i">
          <i class="fas fa-user" id="iconlastname"></i>
        </div>
        <div class="div">
          <h5>Last Name</h5>
          <input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required>
          <span id="lastMsg"></span>
        </div>
      </div>

      <div class="input-div email" id="inputemail">
        <div class="i">
          <i class="fas fa-envelope" id="iconmail"></i>
        </div>
        <div class="div">
          <h5>Email address</h5>
          <input type="email" id="email" name="email" autocomplete="off" class="input" required>
          <span id="emailMsg"></span>
        </div>

      </div>



      <div class="input-div pass2" id="inputpass">
        <div class="i">
          <i class="fas fa-lock" id="iconpass"></i>
          <i class="fas fa-eye" id="eye" onclick="Showfunction()"></i>
          <i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i>

        </div>
        <div class="div">
          <h5>Password</h5>
          <input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required>
          <span id="passMsg"></span>
        </div>
      </div>


      <a href="#">Already have account? Login in!</a>
      <input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up">
      <h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy.</h6>
    </form>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

I recommend you guys to save it to index.html,and style.css in a folder,because for some reason on jsfiddle,the error messages for imput fields appear at wrong position,don't know exactly why.

Sorry for bad english knowledge.

css html jquery javascript
1 Answers

You can define an error class that changes the background-color of the :before and :after elements, which you can add or remove after validating the input.

.error.input-div:before, .error.input-div:after {
  background-color: #e50914;
}

Live Example:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 7rem;
  padding: 0 2rem;
}

.login-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.container {
  grid-template-columns: none;
}

form {
  padding: 40px;
  background-color: #efefee;
  width: 460px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 5px;
  border-radius: 5px;
}

#eye {
  position: fixed;
  margin-left: 685px;
  margin-top: ;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  display: none;
}

#eye2 {
  position: fixed;
  margin-left: 685px;
  margin-top: ;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
  display: none;
}

.login-content h2 {
  margin: 15px 0;
  color: #333;
  text-transform: uppercase;
  font-size: 2.9rem;
  margin-bottom: 105px;
}

.login-content .input-div {
  position: relative;
  display: grid;
  grid-template-columns: 7% 93%;
  margin: 45px 0;
  padding: 5px 0;
  border-bottom: 2px solid #d9d9d9;
}

.login-content .input-div.one {
  margin-top: 0;
}

.i {
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.i i {
  transition: .3s;
}

.input-div>div {
  position: relative;
  height: 45px;
}

.input-div>div>h5 {
  /* //Az inputnak a szövege(Username,password) */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 18px;
  transition: .3s;
}

.input-div:before,
.input-div:after {
  content: '';
  position: absolute;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: #38d39f;
  transition: .4s;
}

.error.input-div:before,
.error.input-div:after {
  background-color: #e50914;
}

.input-div:before {
  right: 50%;
}

.input-div:after {
  left: 50%;
}

.input-div.focus:before,
.input-div.focus:after {
  width: 50%;
}

.input-div.focus>div>h5 {
  top: -10px;
  font-size: 15px;
}

.input-div.focus>.i>i {
  color: #38d39f;
}

.input-div>div>input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  padding: 0.5rem 0.7rem;
  font-size: 1.2rem;
  color: #555;
  font-family: 'poppins', sans-serif;
}

.input-div.pass {
  margin-bottom: 4px;
}

a {
  display: block;
  text-align: right;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: .3s;
}

a:hover {
  color: #38d39f;
  text-decoration: underline;
}

.h6 {
  font-size: 16px;
  display: block;
  text-align: right;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: .3s;
}

.pasw {
  width: 70%;
}

.btn {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  outline: none;
  border: none;
  background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
  background-size: 200%;
  font-size: 1.2rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  margin: 1rem 0;
  cursor: pointer;
  transition: .5s;
}

.btn:hover {
  background-position: right;
}

@media screen and (max-width: 1050px) {
  .container {
    grid-gap: 5rem;
  }
}

@media screen and (max-width: 1000px) {
  form {
    width: 420px;
  }
  .login-content h2 {
    font-size: 2.4rem;
    margin: 8px 0;
    margin-top: 5px;
  }
  #eye {
    margin-left: 545px;
  }
  #eye2 {
    margin-left: 545px;
  }
}

@media screen and (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
  }
  .img {
    display: none;
  }
  .wave {
    display: none;
  }
  .login-content {
    justify-content: center;
  }
}

.login-content {
  justify-content: center;
}

.text-danger {
  position: fixed;
  text-align: left;
  margin: 0;
  margin-top: 58;
  font-size: 14px;
  color: #e50914;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>

<script>
  function Showfunction() {
    var eye = document.getElementById("eye");
    var eye2 = document.getElementById("eye2");
    var pass = document.getElementById("pass");

    if (pass.type === "password") {
      pass.type = "text";
      eye.style.display = "none";
      eye2.style.display = "block";
    } else {
      pass.type = "password";
      eye2.style.display = "none";
      eye.style.display = "block";



    }
  }

  function hiddenscript() {
    var eye = document.getElementById("eye");
    eye.style.display = "block";


  }
</script>

<script>
  $(document).ready(function() {
    // set initially button state hidden
    // use keyup event on email field
    $("#email").keyup(function() {
      if (validateEmail()) {
        // if the email is validated
        // set input email border green
        $('#inputemail').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
        $('#iconmail').css('color', '#38d39f');
        $("#emailMsg").html("<p class='text-danger'></p>");
        $(':input[type="submit"]').prop('disabled', false);



        // and set label 
      } else {
        // if the email is not validated
        // set border red
        $('#inputemail').css('border-bottom', 'solid 2px #e50914').addClass('error');
        $('#iconmail').css('color', '#e50914');
        $("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>");
        $(':input[type="submit"]').prop('disabled', true);

      }

    });

    $("#pass").keyup(function() {
      // check
      if (validatePassword()) {
        // set input password border green
        $('#inputpass').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
        $('#iconpass').css('color', '#38d39f');
        $("#passMsg").html("<p class='text-danger'></p>");
        $(':input[type="submit"]').prop('disabled', false);
        //set passMsg 

      } else {
        $('#inputpass').css('border-bottom', 'solid 2px #e50914').addClass('error');
        $('#iconpass').css('color', '#e50914');
        $("#passMsg").html("<p class='text-danger'>Password must contain at least 1 digit,<br>and need to contain at least 8 character.</p>");
        $(':input[type="submit"]').prop('disabled', true);
      }

    });

    $("#firstName").keyup(function() {
      // check
      if (validateFirstName()) {
        // set input password border green
        $('#inputfirstname').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
        $('#iconfirstname').css('color', '#38d39f');
        $("#firstMsg").html("<p class='text-danger'></p>");
        $(':input[type="submit"]').prop('disabled', false);
        //set passMsg 

      } else {
        $('#inputfirstname').css('border-bottom', 'solid 2px #e50914').addClass('error');
        $('#iconfirstname').css('color', '#e50914');
        $("#firstMsg").html("<p class='text-danger'>The first name must be at least 3 character long.</p>");
        $(':input[type="submit"]').prop('disabled', true);
      }

    });

    $("#lastName").keyup(function() {
      // check
      if (validateLastName()) {
        // set input password border green
        $('#inputlastname').css('border-bottom', 'solid 2px #38d39f').removeClass('error');
        $('#iconlastname').css('color', '#38d39f');
        $("#lastMsg").html("<p class='text-danger'></p>");
        $(':input[type="submit"]').prop('disabled', false);
        //set passMsg 

      } else {
        $('#inputlastname').css('border-bottom', 'solid 2px #e50914').addClass('error');
        $('#iconlastname').css('color', '#e50914');
        $("#lastMsg").html("<p class='text-danger'>The last name must be at least 3 character long.</p>");
        $(':input[type="submit"]').prop('disabled', true);
      }

    });






  });

  function validateEmail() {
    // get value of input email
    var email = $("#email").val();
    // use reular expression
    var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    if (reg.test(email)) {
      return true;
    } else {
      return false;
    }

  }

  function validatePassword() {
    var pass = $("#pass").val();

    var reg = /^(?=.*\d)(?=.*[a-z])[0-9a-zA-Z]{8,}$/

    if (reg.test(pass)) {
      return true;
    } else {
      return false;
    }

  }

  function validateFirstName() {
    //get input password value
    var first = $("#firstName").val();
    // check it s length
    if (first.length > 2) {
      return true;
    } else {
      return false;
    }

  }

  function validateLastName() {
    //get input password value
    var last = $("#lastName").val();
    // check it s length
    if (last.length > 2) {
      return true;
    } else {
      return false;
    }

  }
</script>








<head>
  <title>Animated Login Form</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a81368914c.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>


  <div class="container">

    <div class="login-content">
      <form method="POST">

        <h2 class="title">Sign Up</h2>

        <div class="input-div one" id="inputfirstname">
          <div class="i">
            <i class="fas fa-user" id="iconfirstname"></i>
          </div>
          <div class="div">
            <h5>First Name</h5>
            <input type="text" id="firstName" name="firstName" autocomplete="off" class="input" required>
            <span id="firstMsg"></span>
          </div>
        </div>


        <div class="input-div lastname" id="inputlastname">
          <div class="i">
            <i class="fas fa-user" id="iconlastname"></i>
          </div>
          <div class="div">
            <h5>Last Name</h5>
            <input type="text" id="lastName" name="lastName" autocomplete="off" class="input" required>
            <span id="lastMsg"></span>
          </div>
        </div>

        <div class="input-div email" id="inputemail">
          <div class="i">
            <i class="fas fa-envelope" id="iconmail"></i>
          </div>
          <div class="div">
            <h5>Email address</h5>
            <input type="email" id="email" name="email" autocomplete="off" class="input" required>
            <span id="emailMsg"></span>
          </div>

        </div>



        <div class="input-div pass2" id="inputpass">
          <div class="i">
            <i class="fas fa-lock" id="iconpass"></i>
            <i class="fas fa-eye" id="eye" onclick="Showfunction()"></i>
            <i class="fas fa-eye-slash" id="eye2" onclick="Showfunction()"></i>

          </div>
          <div class="div">
            <h5>Password</h5>
            <input type="password" name="password" autocomplete="off" class="input" maxlength="22" id="pass" oninput="hiddenscript()" required>
            <span id="passMsg"></span>
          </div>
        </div>


        <a href="#">Already have account? Login in!</a>
        <input type="submit" name="submitButton" class="btn" id="btSubmit" value="Sign Up">
        <h6>By clicking “SIGN UP” you agree the Terms of Use and Privacy Policy.</h6>
      </form>
    </div>
  </div>
  <script type="text/javascript">
    const inputs = document.querySelectorAll(".input");


    function addcl() {
      let parent = this.parentNode.parentNode;
      parent.classList.add("focus");
    }

    function remcl() {
      let parent = this.parentNode.parentNode;
      if (this.value == "") {
        parent.classList.remove("focus");
      }
    }


    inputs.forEach(input => {
      input.addEventListener("focus", addcl);
      input.addEventListener("blur", remcl);
    });
  </script>
</body>

</html>

user_95131840
Related