HTML验证似乎不起作用

Question

我在字段上使用验证,需要在用户登录之前输入.但是,我遇到了问题.我在html输入标签中使用了所需的标签,但是当用户点击登录按钮时,没有消息告诉他们这些字段是必需的.

我一直在研究w3Schools

其中指出,如果用户在没有用户输入必填字段的情况下尝试单击"提交",则在字段为空时使用required将触发消息.

有什么建议？

<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

<form>因此,你没有使用,按钮也不知道在哪里"提交".见这个工作示例.

<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>

Answer 2

要使所需的属性起作用,输入标记必须位于表单标记内:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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">
    <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>

    </form>

  </div>
</div>