HTML验证似乎不起作用

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> 

Answer 2

For the required attribute to work, your input tags need to be within form tags:

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