How to fix this function, if I type something appears the same thing as when I do not type anything

Question

How to fix this function, if I type something appears the same thing as when I do not type anything

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

<!DOCTYPE html>
<html>
<head>
<title>Atividade 02</title>
<meta charset="utf-8">
</head>
<body>

CPF <font color="red">*</font> <input type="text" name="CPF" id="CPF" size="15" onsubmit="validar(this)">
<form action="tst.html" name="form1" method="post" onsubmit="return validar();">
<input type="submit" value="Cadastrar">
<script language="javascript" type="text/javascript">

function validar () {
    if (validar=="") {
        alert("Todos os campos foram preenchidos.");
        return true;
} else {
        alert("*Campo obrigatório")
        return false;
}
}
</script>
</body>
</html>

javascript

asked by anonymous 14.07.2015 / 02:00

3 answers

Function only returns zero Uncaught RangeError: Maximum call stack size exceeded

score 2 · Answer 1

Oops, if you just want to force the user to type something in the field you can use required in the field that you want to be mandatory, when he tries to submit the form the mandatory message appears:

<!DOCTYPE html>
<html>
    <head>
        <title>Atividade 02</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="tst.html" name="form1" method="post">
            CPF <font color="red">*</font> <input type="text" name="CPF" id="CPF" size="15"required>
            <input type="submit" value="Cadastrar">
        </form>
    </body>
</html>

Note: always put your fields inside of form as above.

If you want to do the validation with JavaScript you can do this:

<!DOCTYPE html>
<html>
    <head>
        <title>Atividade 02</title>
        <meta charset="utf-8">
        <script>
            function validar(event)
            {
                var cpf = document.getElementById("CPF").value;
                if(cpf === "")
                {
                    event.preventDefault();
                    alert("Campo obrigatório");
                }
                else {
                    alert("Tudo certo!");
                }
            }
        </script>
    </head>
    <body>
        <form action="tst.html" name="form1" method="post" onsubmit="validar(event);">
            CPF <font color="red">*</font> <input type="text" name="CPF" id="CPF" size="15">
            <input type="submit" value="Cadastrar">
        </form>
    </body>
</html>

event.preventDefault(); will prevent the form from being submitted;

var cpf = document.getElementById("CPF").value; takes the value that is in the cpf field and below it compares whether it is empty or not.

To compare strings here use === and not == (for a concrete explanation of this, look at this question and the answers ).

I hope I have contributed up to.

score 1 · Answer 2

How it was:

<!DOCTYPE html>
<html>
<head>
<title>Atividade 02</title>
<meta charset="utf-8">
</head>
<body>
<form name="form1" id="form1" method="POST">
CPF: <font color="red">*</font><input type="text" name="CPF" id="CPF" size="15">
<input type="button" value="Cadastrar" onclick="beforeSubmit();">
</form>
</body>
<script type="text/javascript">
function beforeSubmit(){
    var cpf = document.getElementById('CPF').value;
    if (cpf != "") {
        alert("Todos os campos foram preenchidos.");
        return true;
    } else {
        alert("*Campo obrigatório")
        return false;
    }
   document.getElementById('form1').submit();
}
</script>
</html>

Any questions just call, I hope it has helped. Good studies.

score 1 · Answer 3

1st onsubmit is in the form, not the object, there are several ways to send the data of an element, when there is no more than one element with the same name, called by nomeobjeto.value is more efficient than putting getElementById, getElementByName, getElementByTagName .

2nd When you are going to use form, it is recommended to put all elements sent inside it. Although the same action if using ajax does not need to form.

<!DOCTYPE html>
<html>
<head>
<title>Atividade 02</title>
<meta charset="utf-8">
</head>
<body>

CPF <font color="red">*</font>
<form action="tst.html" name="form1" method="post" onsubmit="return validar(CPF.value);">
<input type="text" name="CPF" id="CPF" size="15">
<input type="submit" value="Cadastrar">
<script language="javascript" type="text/javascript">

function validar (valida) {
    if (valida!="") {
        alert("Todos os campos foram preenchidos.");
        return true;
} else {
        alert("*Campo obrigatório")
        return false;
}
}
</script>
</body>
</html>

Above is the same code with the syntax correction, preserving its syntax, it is worth noting that both objects and variables can return other types of output when empty, in the example

A [vazio] ("") resolves, but it could return a NULL, undefined, NaN , it is always important when running a function test it on several browsers to avoid this type of incident, the same occurs in some cases in IE but not in Firefox, as well as in others.

A tip, valid as numerical and with the number of characters to avoid entering text.

CPF <font color="red">*</font>
<form action="tst.html" name="form1" method="post" onsubmit="return validar(CPF.value);">
<input type="text" name="CPF" id="CPF" size="15">
    <input type="submit" value="Cadastrar"/>
<script>
    function validar (valida) {
    if (valida.replace(/[^0-9]/g,'')!="" && valida.replace(/[^0-9]/g,'').length==11) {
        alert("Todos os campos foram preenchidos.");
        return true;
} else {
        alert("*Campo obrigatório")
        return false;
}
}
</script>