document.querySelector('.login').addEventListener('click', function() {
  const check = document.querySelector('.username').value;
  console.log(typeof check);

  if (!check) {
    document.querySelector('.errorMessage').textContent =
      'kindly enter your username';
  }
});

<div class="user-login">
  <form>
    <label for="">User Name :  <input type="text" name="userName" class=" username"></label> <br>
    <label for="">Password:  <input type="password" name="" class="password"></label> <br>
    <button class="login">Login</button>
  </form>
</div>

<div class="errorMessage">
  <label for=""></label> <br>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To your html modify the button like this:

<button type="button" class="login">Login</button>

or in your javascript you can do something like this:

document.querySelector('.login').addEventListener('click', function(e) {
    e.preventDefault(); // Add this after set 'e' as parameter
    const check = document.querySelector('.username').value;
    console.log(typeof check);

    if (!check) {
       document.querySelector('.errorMessage').textContent =
       'kindly enter your username';
    }
});