Validação de JavaScript para campo de entrada vazio

95

Tenho este campo de entrada <input name="question"/>que desejo chamar a função IsEmpty ao enviar clicando no botão enviar.

Tentei o código abaixo, mas não funcionou. algum conselho?

<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=unicode" />
  <meta content="CoffeeCup HTML Editor (www.coffeecup.com)" name="generator" />
</head>

<body>


  <script language="Javascript">
    function IsEmpty() {

      if (document.form.question.value == "") {
        alert("empty");
      }
      return;
    }
  </script>
  Question: <input name="question" /> <br/>

  <input id="insert" onclick="IsEmpty();" type="submit" value="Add Question" />

</body>

</html>
Expandir trecho

javascript Eyla
fonte
Você aceitou uma resposta inválida . Verificar se há nulo é estranho, pois uma entrada (ou textarea) retorna sempre uma String. Além disso, você não deve usar JavaScript embutido. Além disso, você não deve usar cegamente return false... etc etc
Roko C. Buljan

Respostas:

121 

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
      alert("Please Fill All Required Field");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>
Expandir trecho

Sk Mourya
fonte
2
'onsubmit = "return validate ()"' precisa ser alterado. validar não é o nome da função. Deve ser 'onsubmit = "return validateForm ()"'
tazboy
3
Seria melhor explicar a resposta e a dúvida de OP.
Vishal
7
Este aceito é realmente inválido. As vírgulas na ifdeclaração farão com que apenas a última verificação seja retornada: stackoverflow.com/a/5348007/713874
Bing
35

Veja o exemplo de trabalho aqui

Você está faltando o <form>elemento necessário . Veja como seu código deve ser:

function IsEmpty() {
  if (document.forms['frm'].question.value === "") {
    alert("empty");
    return false;
  }
  return true;
}
<form name="frm">
  Question: <input name="question" /> <br />
  <input id="insert" onclick="return IsEmpty();" type="submit" value="Add Question" />
</form>
Expandir trecho

Sarfraz
fonte
Existe uma maneira de fazer isso para todos os campos dos formulários?
sparecycle
34

Um campo de entrada pode ter espaços em branco , queremos evitar isso.
Use String.prototype.trim () :

function isEmpty(str) {
    return !str.trim().length;
}

Exemplo:

const isEmpty = str => !str.trim().length;

document.getElementById("name").addEventListener("input", function() {
  if( isEmpty(this.value) ) {
    console.log( "NAME is invalid (Empty)" )
  } else {
    console.log( `NAME value is: ${this.value}` );
  }
});
<input id="name" type="text">
Expandir trecho

Roko C. Buljan
fonte
1
Além de null e "", meu código estava faltando esta parte também. Funcionou para mim Obrigado Roko.
Pedro Sousa
17

Eu gostaria de adicionar o atributo obrigatório caso o usuário desabilite o javascript:

<input type="text" id="textbox" required/>

Funciona em todos os navegadores modernos.

Atif Tariq
fonte
10 
if(document.getElementById("question").value.length == 0)
{
    alert("empty")
}
Jak Samun
fonte
7

Adicione uma "pergunta" de id ao seu elemento de entrada e tente o seguinte:

   if( document.getElementById('question').value === '' ){
      alert('empty');
    }

O motivo pelo qual seu código atual não funciona é porque você não tem uma tag FORM nele. Além disso, a pesquisa usando "nome" não é recomendada, pois está obsoleta.

Veja a resposta de @Paul Dixon nesta postagem: O atributo 'nome' é considerado desatualizado para <a> tags âncora?

Rajat
fonte
1 
if(document.getElementById("question").value == "")
{
    alert("empty")
}
Kenneth J
fonte
1
... não há atributo "id" no <input>elemento; isso só funcionaria no IE porque o IE está quebrado.
Pointy
desculpe, pensei que havia um ID, document.getElementsByName ("question") [0] .value, ou apenas adicione um ID ao elemento
Kenneth J
1

Basta adicionar uma tag de ID ao elemento de entrada ... ou seja:

e verifique o valor do elemento em seu javascript:

document.getElementById ("question"). value

Oh sim, pegue o firefox / firebug. É a única maneira de fazer javascript.

Bal
fonte
0

Minha solução abaixo está em es6 porque eu usei constse preferir es5 você pode substituir todos constpor var.

const str = "       Hello World!        ";
// const str = "                     ";

checkForWhiteSpaces(str);

function checkForWhiteSpaces(args) {
    const trimmedString = args.trim().length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)        
}

// If the browser doesn't support the trim function
// you can make use of the regular expression below

checkForWhiteSpaces2(str);

function checkForWhiteSpaces2(args) {
    const trimmedString = args.replace(/^\s+|\s+$/gm, '').length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)
}

function checkStringLength(args) {
    return args > 0 ? "not empty" : "empty string";
}
Expandir trecho

Kingston Fortune
fonte
0 

<pre>
       <form name="myform" action="saveNew" method="post" enctype="multipart/form-data">
           <input type="text"   id="name"   name="name" /> 
           <input type="submit"/>
       </form>
    </pre>

<script language="JavaScript" type="text/javascript">
  var frmvalidator = new Validator("myform");
  frmvalidator.EnableFocusOnError(false);
  frmvalidator.EnableMsgsTogether();
  frmvalidator.addValidation("name", "req", "Plese Enter Name");
</script>
Expandir trecho

antes de usar o código acima, você deve adicionar o arquivo gen_validatorv31.js

Ravindra Bohra
fonte
0

Combinando todas as abordagens, podemos fazer algo assim:

const checkEmpty = document.querySelector('#checkIt');
checkEmpty.addEventListener('input', function () {
  if (checkEmpty.value && // if exist AND
    checkEmpty.value.length > 0 && // if value have one charecter at least
    checkEmpty.value.trim().length > 0 // if value is not just spaces
  ) 
  { console.log('value is:    '+checkEmpty.value);}
  else {console.log('No value'); 
  }
});
<input type="text" id="checkIt" required />
Expandir trecho

Observe que se você realmente deseja verificar os valores, deve fazer isso no servidor, mas isso está fora do escopo desta questão.

A. Meshu
fonte
0

Você pode percorrer cada entrada após o envio e verificar se está vazio

let form = document.getElementById('yourform');

form.addEventListener("submit", function(e){ // event into anonymous function
  let ver = true;
  e.preventDefault(); //Prevent submit event from refreshing the page

  e.target.forEach(input => { // input is just a variable name, e.target is the form element
     if(input.length < 1){ // here you're looping through each input of the form and checking its length
         ver = false;
     }
  });

  if(!ver){
      return false;
  }else{
     //continue what you were doing :)
  } 
})
Kakiz
fonte
0 

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
      alert("Please Fill All Required Field");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>
Expandir trecho

Rizki Fauji
fonte
Olá, quando você está fornecendo uma solução, seria ótimo fornecer um motivo pelo qual sua solução corrigiu o problema, o que pode ajudar os futuros leitores.
Ehsan Mahmud