Требуется выпадающая форма начальной загрузки <input>

Question

Когда я нажимаю «отправить» и у меня появляется пустое поле с атрибутом «требуется» в раскрывающейся форме - эта раскрывающаяся форма скрывается, и сообщение «Пожалуйста, заполните это поле» не отображается.

<li class="nav-item my-auto">
    <button class="btn btn-primary nav-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Registration</button>
        <div class="dropdown-menu drop-form">
          <span class="dropdown-menu-arrow"></span>
          <p class="welcome text-center">Welcome!</p>
          <form action="#" method="get" id="form-registration" class="nav-form">
              <div class="form-group">
                <label for="name">Your name</label>
                <input type="text" name="name" id="name" class="form-control" required>
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email" class="form-control" required>
              </div>
              <div class="form-group">
                <label for="reg-pass">Password</label>
                <input type="password" name="password" id="reg-pass" class="form-control" required>
              </div>
              <button type="submit" class="btn btn-primary mx-auto">Registration</button>
          </form>
          <p class="sign-link text-center">Already registered? <a href="#">Sign in</a></p>
        </div>
      </li>