html Javascript does not accept empty data

Asked

Viewed 47 times

0

Good,

I’m having trouble with an html form where the data doesn’t go empty to the comic. I have Javascript but it is not working correctly.

Jsfield: https://jsfiddle.net/ogr6oa0t/

Code:

  <form action="NovoCliente.php" method="post" onsubmit="return validar();">



 <p><label class="formulario">Nome </label><input type="text" name="Nome" size="50" maxlength="30"></p>

 <p><label class="formulario">Password </label><input type="password" name="Password" size="50" maxlength="30"></p>

 <p><label class="formulario">Número de BI </label><input type="Number" name="NumeroBI" size="50" maxlength="30"></p>

 <p><label class="formulario">Morada </label><input type="text" name="Morada" size="50" maxlength="30"></p>

 <p><label class="formulario">Telefone </label><input type="text" name="Telefone" size="50" maxlength="30"></p>

 <p><label class="formulario">Data de Nascimento </label><input type="Date" name="DataNasc"></p>


 <p><label class="formulario">Email </label><input type="text" name="Email" size="50" maxlength="30"></p>


<input type="reset" value="Limpar">
<input type="submit">
</form>

Script:

   <script>//Script para validar dados do Registo

    function validar(){
        if(document.ficha.nome.value.length == 0)
        {
            alert("Falta nome");
            return false;
        }

        if( isNaN (document.ficha.numbi.value.length == 0))
        {
            alert("Sรณ numeros");
            return false;
        }
        else if (document.ficha.numbi.value.length < 8)
        {
            alert("Faltam numeros");
            return false;
        }

        if(document.ficha.correio.value.indexOf("@") == -1)
        {
            alert("Email Invalido");
            return false;
        }

    }




</script>
javascript html

  • Missed putting the name="ficha".

  • Just be aware that even if you validate in Javascript, you should still validate in the server language (php, Asp, etc).

2 answers

1


These properties you search for are invalid (Undefined), do the following:

function validar(){
  var allOk = true;
		if(document.getElementsByName('Nome')[0].value == '')
		{
			alert("Falta nome");
			allOk = false;
		}
		
		if(document.getElementsByName('NumeroBI')[0].value == '' || isNaN(document.getElementsByName('NumeroBI')[0].value))
		{
			alert("Sรณ numeros");
			allOk = false;
		}
		else if (document.getElementsByName('NumeroBI')[0].value.length < 8)
		{
			alert("Faltam numeros");
			allOk = false;
		}
		
		if(document.getElementsByName('Email')[0].value.indexOf('@') < 0)		{
			alert("Email Invalido");
			allOk = false;
		}
	return allOk;
	}
<form action="NovoCliente.php" method="post" onsubmit="return validar();">



<p><label class="formulario">Nome </label><input type="text" name="Nome" size="50" maxlength="30"></p>

<p><label class="formulario">Password </label><input type="password" name="Password" size="50" maxlength="30"></p>

<p><label class="formulario">Número de BI </label><input type="Number" name="NumeroBI" size="50" maxlength="30"></p>

<p><label class="formulario">Morada </label><input type="text" name="Morada" size="50" maxlength="30"></p>

<p><label class="formulario">Telefone </label><input type="text" name="Telefone" size="50" maxlength="30"></p>

<p><label class="formulario">Data de Nascimento </label><input type="Date" name="DataNasc"></p>


<p><label class="formulario">Email </label><input type="text" name="Email" size="50" maxlength="30"></p>


<input type="reset" value="Limpar">
<input type="submit">
</form>

EXAMPLE in jsfiddle

0

Although there are far better ways to validate. I’ll put your corrected example.

Remembering: The first one you are doing, the script does not find the form situations, because javascript and Sensitive Case.

Correcting your form:

Javascript

 <script type="text/javascript">
        function validateForm() {
        var errorMsg = {
          nome:"Preencha corretamente o nome",
          password:"Preencha a senha",
          nomero_bi:"Preencha o número BI",
          morada:"Preencha a morada",
          telefone:"Preencha o telefone",
          data_nasc:"Preencha a data de nascimento",
          email:"Preencha o email"
        };
                var formulario = document.forms["ficha"];
                for(var i=0; i<=formulario.length; i++) {
                   if (formulario[Object.keys(errorMsg)[i]].value == null ||
                       formulario[Object.keys(errorMsg)[i]].value == "") {

                       alert(errorMsg[Object.keys(errorMsg)[i]])
                       formulario[Object.keys(errorMsg)[i]].focus();
                       return false;
                   }
                }
                return true;
            }
    </script>

HTML

<form action="/echo/html/" name="ficha" method="post" onsubmit="return validateForm();">
  <p><label class="formulario">Nome </label><input type="text" name="nome" size="50" maxlength="30"></p>
  <p><label class="formulario">Password </label>
     <input type="password" name="password" size="50" maxlength="30"></p>
  <p><label class="formulario">Número de BI </label>
     <input type="number" name="nomero_bi" size="50" maxlength="30"></p>
  <p><label class="formulario">Morada </label>
     <input type="text" name="morada" size="50" maxlength="30"></p>
  <p><label class="formulario">Telefone </label>
     <input type="text" name="telefone" size="50" maxlength="30"></p>
  <p><label class="formulario">Data de Nascimento </label>
     <input type="date" name="data_nasc"></p>
  <p><label class="formulario">Email </label>
     <input type="text" name="email" size="50" maxlength="30"></p>
  <input type="reset" value="Limpar">
  <input type="submit" value="Enviar">
</form>

Example in JSFIDDLE

Browser other questions tagged javascript html

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