let formBtn = document.querySelector('#formBtn');
formBtn.addEventListener('click', function check_condition(){
let formName = document.querySelector('#formname').value;
if(formName == " "){
alert("Kindly enter your name");
}
});
.left-form{
width: 60%;
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.6 ease;
}
.left-form h4{
font-size: 26px;
}
.right-adrs{
width: 40%;
background-color: orange;
}
.form-inputs{
padding: 12px 16px;
color: lightgray;
width: 90%;
}
#formBtn{
width: 20%;
padding: 16px 16px;
background-color: #355E3B;
color: white;
border:#355E3B;
cursor: pointer;
}
textarea{
height: 100px;
width: 90%;
}
<div class="left-form">
<h4>Get in touch</h4>
<input type="text" class="form-inputs" id="formname" placeholder=" Name" />
<input type="email" class="form-inputs formemail" placeholder=" Email"/>
<input type="tel" class="form-inputs formtel" placeholder=" Phone number"/>
<textarea placeholder=" Message"></textarea>
<button type="submit" id="formBtn">Send Message</button>
</div>
No está relacionado con el flexbox , eso sucedió porque verifica si el valor del nombre del formname es igual al espacio vacío, pero debe ser una cadena vacía formName.trim() === "" o formName.length === 0 .
let formBtn = document.querySelector('#formBtn');
formBtn.addEventListener('click', function check_condition(){
let formName = document.querySelector('#formname').value;
if(formName.trim() === ""){
alert("Kindly enter your name");
}
});
.left-form{
width: 60%;
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.6 ease;
}
.left-form h4{
font-size: 26px;
}
.right-adrs{
width: 40%;
background-color: orange;
}
.form-inputs{
padding: 12px 16px;
color: lightgray;
width: 90%;
}
#formBtn{
width: 20%;
padding: 16px 16px;
background-color: #355E3B;
color: white;
border:#355E3B;
cursor: pointer;
}
textarea{
height: 100px;
width: 90%;
}
<div class="left-form">
<h4>Get in touch</h4>
<input type="text" class="form-inputs" id="formname" placeholder=" Name" />
<input type="email" class="form-inputs formemail" placeholder=" Email"/>
<input type="tel" class="form-inputs formtel" placeholder=" Phone number"/>
<textarea placeholder=" Message"></textarea>
<button type="submit" id="formBtn">Send Message</button>
</div>