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>