javascript - html validation doesn't seem to be working

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>

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>

Share Improve this question edited Nov 7, 2018 at 20:00 Jaquarh 6,6898 gold badges46 silver badges115 bronze badges asked Nov 7, 2018 at 19:33 Danny_P 3611 gold badge2 silver badges8 bronze badges

2 What browser are you using? See caniuse. for a list of browsers where this is supported. – War10ck Commented Nov 7, 2018 at 19:36
4 I don't see a <form> tag. – ps2goat Commented Nov 7, 2018 at 19:37
1 Also, the required attribute is new to html5 so make sure to have <!DOCTYPE html> at beginning of the html. – Dominique Fortin Commented Nov 7, 2018 at 21:16

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - html validation doesn't seem to be working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)