Check input field is empty or not

Question

I am going to create simple validation form using Vanilla JavaScript, but I have problem, I want to check first ('entername') field, if user will not enter any letters in it, i want to console log message ('enter name'), it's works fine, but after that user reenter his name if field it returns in console ('enter name'), i want to return ('not enter') message.

var userBtn = document.getElementById('checkuserinputs');
 var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
 userBtn.addEventListener('click', function(){
   if(checkUserName.length == 0){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

 <div class="container-fluid">
        <div class="modal-costum-row">
        <div class="enter-name-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
        </div>
        </div>
        <div class="enter-surname-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
        </div>
        </div>
        </div>
        <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
        <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
        </div>
        </div>
        </div>
        
        <button id="checkuserinputs">check input</button>

Does this answer your question? [JavaScript validation for empty input field](https://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field) — blami, Sep 15 '20 at 09:59

score 2 · Accepted Answer · answered Sep 15 '20 at 10:01

You need to get the value after clicking the button. If you put it outside of the click event, the value will never be updated.

var userBtn = document.getElementById('checkuserinputs');

userBtn.addEventListener('click', function () {
    var checkUserName = document.getElementById('user-name').value;
    var checkUserSurname = document.getElementById('user-surname').value;
    var checkUserPhone = document.getElementById('user-mobile').value;
    
    if (checkUserName.length == 0) {
        console.log('enter name')
    } else {
        console.log('not enter')
    }
})

<div class="container-fluid">
    <div class="modal-costum-row">
        <div class="enter-name-side">
            <div class="input-row">
                <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername" />
            </div>
        </div>
        <div class="enter-surname-side">
            <div class="input-row">
                <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname" />
            </div>
        </div>
    </div>
    <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
            <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber" />
        </div>
    </div>
</div>

<button id="checkuserinputs">check input</button>

score 1 · Answer 2 · answered Sep 15 '20 at 10:03

You need to retrieve the value of the input field in the click function callback:

userBtn.addEventListener('click', () => {
const checkUserName = document.getElementById('user-name').value;
if(checkUserName.length === 0){
  console.log('enter name')
} else {
  console.log('not enter')
}
})

score 0 · Answer 3 · answered Sep 15 '20 at 10:02

change the variable geting value to button click function that is,

 var userBtn = document.getElementById('checkuserinputs');
 userBtn.addEventListener('click', function(){

  var checkUserName = document.getElementById('user-name').value;
  var checkUserSurname = document.getElementById('user-surname').value;
  var checkUserPhone = document.getElementById('user-mobile').value;
   if(!checkUserName){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

 var userBtn = document.getElementById('checkuserinputs');
 userBtn.addEventListener('click', function(){

  var checkUserName = document.getElementById('user-name').value;
  var checkUserSurname = document.getElementById('user-surname').value;
  var checkUserPhone = document.getElementById('user-mobile').value;
   if(!checkUserName){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

<div class="container-fluid">
        <div class="modal-costum-row">
        <div class="enter-name-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
        </div>
        </div>
        <div class="enter-surname-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
        </div>
        </div>
        </div>
        <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
        <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
        </div>
        </div>
        </div>
        
        <button id="checkuserinputs">check input</button>

Check input field is empty or not

3 Answers3