html validation doesn't seem to be working

Question

I'm using validation on fields, which need to be entered before a user is to log in. However, I'm encountering a problem. I'm using the required tags within the html input tags but when a user clicks on the login button, there is no message telling them that the fields are required.

I have been researching on w3Schools

Which states the use of required will proc a message when the field is empty, if the user tries to click submit without the user entering the required fields.

Any suggestions?

<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <br />
        <h3 style='color: #fff;' class="register-heading">Log in to view your <span style='font-weight: bold;'>dashboard</span></h3>
        <div class="row register-form">
            <div class="col-md-12">
                <div class="form-group">
                    <input id="login-email" type="email" class="form-control" placeholder="Email *" value="" required/>
                </div>                                       
            </div>
        <div class="form-group col-md-12">
            <input id="login-password" type="password" class="form-control" placeholder="Password *" value="" required />
                </div>
             <div class="col-md-2"></div>
             <div class="col-md-6">
                 <input class="btnRegister pull-left" id="login-btn" type="submit" value="Login"/>
             </div>
                 <div class="col-md-4"></div>
             </div>
    </div>

Answer 1

You're not using a <form> therefore, the button does not know where to 'submit' too. See this working example.

<form>
  <div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <br />
    <h3 style='color: #fff;' class="register-heading">Log in to view your <span style='font-weight: bold;'>dashboard</span></h3>
    <div class="row register-form">
      <div class="col-md-12">
        <div class="form-group">
          <input id="login-email" type="email" class="form-control" placeholder="Email *" value="" required/>
        </div>
      </div>
      <div class="form-group col-md-12">
        <input id="login-password" type="password" class="form-control" placeholder="Password *" value="" required />
      </div>
      <div class="col-md-2"></div>
      <div class="col-md-6">
        <input class="btnRegister pull-left" id="login-btn" type="submit" value="Login" />
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>
</form>