Issue
This code only works for empty email input but not for invalid email. I want to show different error-text for each problem. Is it possible to do it with vanilla javascript? Or is there any fault in my javascript code?
I haven't added the error text for invalid email input yet. Help, please. Thanks in advance.
const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')
function validateEmail (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
e.preventDefault();
for(let i=0;i<inputs.length;i++){
if(!inputs[i].value){
inputs[i].parentElement.classList.add('error');
}else{
inputs[i].parentElement.classList.remove('error');
if(inputEmail){
if(validateEmail(inputEmail.value)){
inputEmail.parentElement.classList.remove('error');
}else{
inputEmail.parentElement.classList.remove('error');
}
}
}
}
})
form {
background: white;
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
padding: 1.5rem;
border-radius: 0.5rem;
}
.infield {
position: relative;
margin-bottom: 1rem;
}
input {
width: 100%;
height: 3rem;
border: 1px solid rgba(128, 128, 128, 0.425);
border-radius: 0.3rem;
padding-left: 1rem;
}
.infield.error input {
border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
border: 1px solid hsl(247, 40%, 68%);
outline: none;
}
::placeholder {
color: hsl(249, 10%, 26%);
font-weight: 600;
}
.infield.error ::placeholder {
color: hsl(0, 100%, 74%);
}
.error-image {
display: none;
position: absolute;
top: 0.8rem;
right: 1rem;
}
.infield.error .error-image {
display: block;
}
.error-text {
display: none;
color: hsl(0, 100%, 74%);
font-size: 0.7rem;
font-style: italic;
text-align: right;
margin: 0.3rem 0;
}
.infield.error .error-text {
display: block;
}
form button {
width: 100%;
height: 3rem;
border: none;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
color: white;
background: hsl(154, 59%, 51%);
box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
cursor: pointer;
}
form button:hover {
opacity: 0.8;
}
#terms {
font-size: 0.7rem;
font-weight: 500;
color: hsl(246, 25%, 77%);
margin: 1rem;
text-align: center;
}
#terms a {
font-weight: 700;
text-decoration: none;
color: hsl(0, 100%, 74%);
}
<form action="#" id="form">
<div class="infield">
<input type="text" placeholder="First Name">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">First Name cannot be empty</p>
</div>
<div class="infield">
<input type="text" placeholder="Last Name">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Last Name cannot be empty</p>
</div>
<div class="infield">
<input type="text" placeholder="Email Address" class="input-email">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Looks like this is not an email</p>
</div>
<div class="infield">
<input type="password" placeholder="Password">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Password cannot be empty</p>
</div>
<button type="submit">Claim your free trial</button>
<p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
</form>
Solution
By putting your E-mail check inside the loop, any input after the E-mail input will override the changes.
Moved your E-mail check outside the loop, and added the error icon when not valid:
const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')
function validateEmail (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
e.preventDefault();
for(let i=0;i<inputs.length;i++){
if(!inputs[i].value){
inputs[i].parentElement.classList.add('error');
}else{
inputs[i].parentElement.classList.remove('error');
}
}
if(inputEmail){
if(validateEmail(inputEmail.value)){
inputEmail.parentElement.classList.remove('error');
}else{
inputEmail.parentElement.classList.add('error');
}
}
})
form {
background: white;
box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
padding: 1.5rem;
border-radius: 0.5rem;
}
.infield {
position: relative;
margin-bottom: 1rem;
}
input {
width: 100%;
height: 3rem;
border: 1px solid rgba(128, 128, 128, 0.425);
border-radius: 0.3rem;
padding-left: 1rem;
}
.infield.error input {
border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
border: 1px solid hsl(247, 40%, 68%);
outline: none;
}
::placeholder {
color: hsl(249, 10%, 26%);
font-weight: 600;
}
.infield.error ::placeholder {
color: hsl(0, 100%, 74%);
}
.error-image {
display: none;
position: absolute;
top: 0.8rem;
right: 1rem;
}
.infield.error .error-image {
display: block;
}
.error-text {
display: none;
color: hsl(0, 100%, 74%);
font-size: 0.7rem;
font-style: italic;
text-align: right;
margin: 0.3rem 0;
}
.infield.error .error-text {
display: block;
}
form button {
width: 100%;
height: 3rem;
border: none;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
color: white;
background: hsl(154, 59%, 51%);
box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
cursor: pointer;
}
form button:hover {
opacity: 0.8;
}
#terms {
font-size: 0.7rem;
font-weight: 500;
color: hsl(246, 25%, 77%);
margin: 1rem;
text-align: center;
}
#terms a {
font-weight: 700;
text-decoration: none;
color: hsl(0, 100%, 74%);
}
<form action="#" id="form">
<div class="infield">
<input type="text" placeholder="First Name">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">First Name cannot be empty</p>
</div>
<div class="infield">
<input type="text" placeholder="Last Name">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Last Name cannot be empty</p>
</div>
<div class="infield">
<input type="text" placeholder="Email Address" class="input-email">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Looks like this is not an email</p>
</div>
<div class="infield">
<input type="password" placeholder="Password">
<img src="./images/icon-error.svg" alt="icon-error" class="error-image">
<p class="error-text">Password cannot be empty</p>
</div>
<button type="submit">Claim your free trial</button>
<p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
</form>
Answered By - KompjoeFriek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.