logo标签列表

HTML验证似乎无法正常工作

javascriptphphtml
5
我正在使用字段验证，需要在用户登录之前输入。然而，我遇到了一个问题。我在html的输入标签中使用了required标签，但当用户单击登录按钮时，没有消息告诉他们这些字段是必需的。
我一直在研究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>

2
你使用的是哪个浏览器？请访问 caniuse.com 查看支持此功能的浏览器列表。 - War10ck
4
我看不到 <form> 标签。 - ps2goat
1
此外，required 属性是 HTML5 中的新属性，因此请确保在 HTML 开头有 <!DOCTYPE html>。 - Dominique Fortin
2个回答
7
您没有使用
标签，因此该按钮不知道要“提交”到哪里。请参考这个可行的示例。 

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

5

为使required属性生效，您的输入标签需要在form标签内:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接