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 >
        <h4>Get in touch</h4>
            <input type="text"  id="formname" placeholder=" Name" />
            <input type="email"  placeholder=" Email"/>
            <input type="tel"  placeholder=" Phone number"/>
            <textarea placeholder=" Message"></textarea>
            <button type="submit"  id="formBtn">Send Message</button>
    </div>

I want to make a form in which the values can't go blank. If somebody clicks on button without entering the values, the alert box pops up. to design it, I have used flex property. but now the JavaScript is not working. Can somebody explain why it is so?

CodePudding user response：

It's not related to the flexbox, that's happened because you check if the formname value is equal to empty space, but it should be an empty string formName.trim() === "" or 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 >
        <h4>Get in touch</h4>
            <input type="text"  id="formname" placeholder=" Name" />
            <input type="email"  placeholder=" Email"/>
            <input type="tel"  placeholder=" Phone number"/>
            <textarea placeholder=" Message"></textarea>
            <button type="submit"  id="formBtn">Send Message</button>
    </div>