how to create input email validation in html css and javascript

 

# To create a how to create input email validation in html css and javascript Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a how to create input email validation in html css and javascript Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for theinput email validation:

<div class="con-input">
  <input oninput="handleInput(event)" placeholder="Email" type="text">
  <div class="icons">
      <i class='bx bxs-check-circle check'></i>
      <i class='bx bxs-x-circle x'></i>
  </div>
</div>

            

2. Next, add some Link to create a input email validation

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

            

3. Next, add some CSS to create a input email validation and position the container in the center:

                
body {
    --primary: 25, 91, 255;
    --color: 44, 62, 80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100vh;
    background: #F4F7F8;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    color: rgb(var(--color));
    width: 100%;
    height: 100vh;
}

* {
    list-style: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.con-input {
    position: relative;
    display: flex;
    align-items: center;
}

input {
    padding: 11px 15px;
    border-radius: 9px;
    border: 0px;
    box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, .05);
    transition: all .25s ease;
    min-width: 250px;
    border: 2px solid rgba(0, 0, 0, 0.486);
}

input.valid~.icons .check {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

input.invalid~.icons .x {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.icons {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 20px;
    height: 20px;
    transition: all .25s ease;
}

i {
    position: absolute;
    transition: all .25s ease;
    font-size: 1.3rem;
    opacity: 0;
    visibility: hidden;
    transform: scale(.5);
}

.check {
    color: #3aba6f;
    text-shadow: 0px 5px 10px rgba(58, 186, 111, .3);
}

.x {
    color: rgb(240, 90, 92);
    text-shadow: 0px 5px 10px rgba(240, 90, 92, .3);
}

input:focus {
    transform: translate(0, -6px);
    box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, .09);
    padding-left: 20px;
    border: 2px solid rgb(0, 0, 0);
}

input:focus~.icons {
    transform: translate(0, -6px);
}
            

4. Use JavaScript to create a input email validation element inside the container:

                
function handleInput(evt) {
  const value = evt.target.value
  const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
  
  if (emailRegex.test(value.trim())) {
      evt.target.classList.add('valid')
      evt.target.classList.remove('invalid')
  } else {
      evt.target.classList.add('invalid')
      evt.target.classList.remove('valid')
  }

  if (!value) {
      evt.target.classList.remove('invalid')
  }
} 
            

#input email validation in HTML and CSS For Full Code 👇

 

Download Full Code

 

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create input email validation html css |input email validation in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.