Question

我正在对字段进行验证，需要在用户登录之前输入该字段。但是，我遇到了问题。我在html输入标签中使用了必需的标签，但是当用户单击“登录”按钮时，没有消息告诉他们必填字段。

我一直在研究w3Schools

其中指出，如果用户在未输入必填字段的情况下尝试单击“提交”，则在该字段为空时使用必填消息会触发消息。

有什么建议吗？

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

html验证似乎不起作用

2 个答案: