Validation doesn't work jquery

Question:

Colleagues

I made this script to validate access, but it's not working. Can anyone tell me where the error is?

<html>
    <head>
        <title>title</title>
    </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
<script type="text/javascript">
 $('#submit').submit(function(){
      alert('aqui');

      return false;
    });
  </script>
    <body>
<div id="success"></div>
<form  id="contact-form" action="#" method="post">
    <input name="Email" placeholder="Login" id="login" type="text" required >
    <input name="Password" placeholder="Senha" id="senha" type="password" required>
    <div class="sign-up">
      <div align="center">
          <button type="submit" value="Acessar" id="submit"/>Acessar</button>
        </div>
    </div>
</form>
    </body>
</html>

Answer:

You have to put the <script> after the HTML, so jQuery won't find the button since your HTML hasn't been read yet.

Also note that:

  • your script tag that loads jQuery must be closed, missing the </script>
  • the event must be click and not submit . If instead of $('#submit').submit(function(){ put this event handler in the form then you should use submit .

An alternative is to join a function to run only when the page has loaded, in which case it would be like this:

<html>

<head>
  <title>title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#submit').click(function() {
        alert('aqui');
        return false;
      });
    });
  </script>
</head>


<body>
  <div id="success"></div>
  <form id="contact-form" action="#" method="post">
    <input name="Email" placeholder="Login" id="login" type="text" required>
    <input name="Password" placeholder="Senha" id="senha" type="password" required>
    <div class="sign-up">
      <div align="center">
        <button type="submit" value="Acessar" id="submit">Acessar</button>
      </div>
    </div>
  </form>
</body>

</html>
Post Views: 3
Scroll to Top