CODEWITHSUNDEEP
javascripthtmlinput
Nightcrawler
Nightcrawler

Reputation: 1081

Check input field is empty or not

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>

Upvotes: 0

Views: 891

Answers (3)

user14280311
user14280311

Reputation: 61

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')
}
})

Upvotes: 1

Rayees AC
Rayees AC

Reputation: 4659

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>

Upvotes: 0

Hao Wu
Hao Wu

Reputation: 20910

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>

Upvotes: 2

Related Questions