Validation does not work jquery

3

Colleagues

I made this script to validate access, but it is 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"><scripttype="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>
    
asked by anonymous 02.04.2017 / 15:53

1 answer

3

You have to put <script> after HTML, so that jQuery does not find the button once your HTML has not yet been read.

Also note that:

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

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

<html>

<head>
  <title>title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><scripttype="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>
    
02.04.2017 / 16:09