html JavaScript does not accept empty data

Question

html JavaScript does not accept empty data

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good,

I'm having a problem with an html form where I want the data not to be empty for DB. I have JavaScript but it is not working properly.

Jsfield: link

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

asked by anonymous 29.06.2016 / 12:14

2 answers

0

Although there are much better ways to validate. I'll put your example corrected.

Remembering: The first one you are doing, the script does not find the form's situations, because javascript is 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

29.06.2016 / 15:14

css presents error in the chorme Using search and pagination field with Function Based View in Django

score 1 · Accepted Answer

These properties to fetch give as 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