Javascript validation with jQuery Mask

Asked

Viewed 1,389 times

0

I am developing an area where the student will register in it, so I decided to seek help from libraries like jQuery, I got a good result before that, but there are some errors in my script that I cannot identify.

<!Doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
</head>
<body>
<form name="dados" id="dados" method="POST">
  <input type="text" id="cpf" name="cpf" placeholder="CPF">
  <input type="text" id="telefone" name="telefone" placeholder="Telefone">
  <input type="text" id="celular" name="celular" placeholder="Celular">
</form>
</body>
      <script>
        $(document).ready(function(){
             $('#cep').mask('00000-000');
             $('#telefone').mask('0000-0000');
             $('#celular').mask('00000-0000');
             $('#cpf').mask('000.000.000-00', {reverse: true});
             $('#rg').mask('00.000.000-00', {reverse: true});
        });
      </script>

This jQuery Mask is developed by: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

NOTE: My script does not work applying previously mentioned masks.

  • 1

    You need to add jquery to the head as well, not just the input Masked plugin.

  • I just added <script src="jquery-3.3.1.min. js"></script> but it doesn’t work.

  • 1

    Just to make clear the jQuer link should come first that the plugin link you know right? type like: <script src="jquery-3.3.1.min. js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

  • Yes, I did so.

  • try to insert via Cdn the jquery. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  • I appreciate the help, but still not running my script... I do not know what is wrong honestly.

  • Always when working with Javascript leave the browser console open. Press F12 if using the Chrome and see if there are any errors in the tab console.

Show 2 more comments

1 answer

0


Here it worked, so:

<!Doctype html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
</head>
<body>
<form name="dados" id="dados" method="POST">
  <input type="text" id="cpf" name="cpf" placeholder="CPF">
  <input type="text" id="telefone" name="telefone" placeholder="Telefone">
  <input type="text" id="celular" name="celular" placeholder="Celular">
</form>
</body>
      <script>
        $(document).ready(function(){
             $('#cep').mask('00000-000');
             $('#telefone').mask('0000-0000');
             $('#celular').mask('00000-0000');
             $('#cpf').mask('000.000.000-00', {reverse: true});
             $('#rg').mask('00.000.000-00', {reverse: true});
        });
      </script>
</html>

  • From what I’ve observed, your code is equal to my correct?

  • Yes... I just put the </html> at the end, and added the jquery script to the <haed>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.