Your problem:
and when I load the HTML page and fill in the CPF data, nothing happens, there is no answer.
Instead of function validar () {, use another scope format. In this case, validar = function () { // ... }. Behold:
validar = function () {
var formulario = document.getElementById("formulario");
var cpf = formulario.cpf;
var email = formulario.email;
var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
var re_email = /^([\w-]+(\.[\w-]+)*@(([\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(\.[a-z]{2})?)$/i;
if(re_cpf.test(cpf.value)){
alert("CPF válido");}
else{
alert("CPF inválido");
}
}
Example running on jsFiddle.
Still, your next mistake is a problem with regular expression. I solved it for you:
validar = function () {
var formulario = document.getElementById("formulario");
var cpf = formulario.cpf;
var email = formulario.email;
var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
var re_email = /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/;
if(re_cpf.test(cpf.value)){
alert("CPF válido");}
else{
alert("CPF inválido");
}
if(re_email.test(email.value)) alert('E-mail válido');
else alert('E-mail inválido');
}
Example running on jsFiddle (updated)
Why does your coupler onclick is not cocking validar()?
Based on a questionnaire made via a comment of the OP - very good by the way! - I will answer this question with minimalism:
function x () {
// do something
};
The above format is called a "function statement", which in turn is a template where the function is saved to be, say, used "later" - not in the first instance. As you can see, no variable is signed to it.
Next, the model proposed by me:
x = function () {
// do something
};
It’s called "function expression" in literal translation. It means that you sign to "x" a function to be used at any time when x be executed.
And what’s the practical difference?
In your specific case, you are using the observer onclick "inline"1. His scope is the GIFT and will perform a function that already exists at the moment the customer clicks on the element you designated to trigger the function named by you as validar().
While validar() is a function that "not yet" exists, its effect will not be triggered.
But what do you mean, "It doesn’t exist yet"? It does! I wrote!
There is, but yours <a> does not yet know who he is. If you write this HTML, the function validar() {} will work:
<a href="#" onclick="validar()">Validar que funciona</a>
<script>
function validar() {
alert('hello!');
};
</script>
In your case, you are writing Javascript in an external file (js/aula09.js) and therefore he had not yet been declared for the GIFT.
I still don’t understand
If you declare a function as previously explained in the same file you call it in, everything will work as expected. As long as you do not do this, the functions should be expressed - explained to the DOM who is who.
To illustrate, take a look in this jsFiddle. The Javascript that is at the bottom left will not work while what is embedded in your HTML will execute your role - this is because the Javascript of this bottom white square is "external" to HTML.
For comparison purposes, if you put in a file .js external this content:
f = function () {
alert('Olá!');
};
And put in a file .html this:
<a href="#" onclick="x()">Funciona!</a>
<a href="#" onclick="f()">Também funciona!</a>
<script>
function x() {
alert('hello!');
};
</script>
You’ll realize that both will work, just like in this other jsFiddle.
1: In this case, "inline" means that you are using Javascript via HTML in the line of your element - it is not an effect unobtrusive.
Can you display the full <form> html? Your JS uses some information you haven’t shown in HTML
– rafaels88
Has a
}the most at the end of the code. Check your indentation and check what appears in the browser console when using the page.– Guilherme Bernal
I don’t know why the full form didn’t appear. I’ll try again below:
– sscarvalho
<form id="formulary"> <fieldset> <Legend>Validation and Formatting</Legend> <label for="Cpf">CPF:<label> <input name="Cpf" type="text" /> <label for="email">Email:<label> <input name="email" type="text" /> <a href="#" onclick="validate()">Validate</a> </fieldset> </form>
– sscarvalho
rafaels88, there really is an extra "}", but even correcting this error the function remains unanswered. Thank you anyway.
– sscarvalho
@sscarvalho, the error is in re_email, remove it will work
– Diego Zanardo
@sscarvalho If you have had any success, collaborate with Sopt and mark an answer as correct or post your solution.
– Guilherme Oderdenge
window.onload = Function() { Document.getElementById ... }, you can only use getElementById after rendering the element with ID
– Ivan Ferrer