Validación de JavaScript para campo de entrada vacío

95

Tengo este campo de entrada <input name="question"/> que quiero llamar a la función IsEmpty al enviar haciendo clic en el botón enviar.

Probé el siguiente código pero no funcionó. ¿algún consejo?

<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 fragmento

javascript Eyla
fuente
Aceptaste una respuesta inválida . Verificar nulo es extraño ya que una entrada (o área de texto) devuelve siempre una cadena. Además, no debe utilizar JavaScript en línea. Además, no debes usarlo a ciegas return false... etc., etc.
Roko C. Buljan

Respuestas:

122 

<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 fragmento

Sk Mourya
fuente
2
'onsubmit = "return validate ()"' necesita ser cambiado. validar no es el nombre de la función. Debería ser 'onsubmit = "return validateForm ()"'
tazboy
3
Lo mejor sería explicar la respuesta y la duda de OP.
Vishal
7
Esto aceptado no es válido en realidad. Las comas en la ifdeclaración harán que solo se devuelva el último cheque: stackoverflow.com/a/5348007/713874
Bing
35

Vea el ejemplo de trabajo aquí

Falta el <form>elemento requerido . Así es como debería ser su código:

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 fragmento

Sarfraz
fuente
¿Hay alguna forma de hacer esto para todos los campos de los formularios?
bicicleta de repuesto
34

Un campo de entrada puede tener espacios en blanco , queremos evitarlo.
Utilice String.prototype.trim () :

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

Ejemplo:

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 fragmento

Roko C. Buljan
fuente
1
Además de null y "", a mi código también le faltaba esta pieza. Funcionó para mí. Gracias Roko.
Pedro Sousa
17

Me gustaría agregar el atributo requerido en caso de que el usuario deshabilite javascript:

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

Funciona en todos los navegadores modernos.

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

Agrega una "pregunta" de identificación a tu elemento de entrada y luego prueba esto:

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

La razón por la que su código actual no funciona es porque no tiene una etiqueta FORM allí. Además, no se recomienda la búsqueda con "nombre", ya que está obsoleta.

Vea la respuesta de @Paul Dixon en esta publicación: ¿El atributo 'nombre' se considera desactualizado para las etiquetas de anclaje <a>?

Rajat
fuente
1 
if(document.getElementById("question").value == "")
{
    alert("empty")
}
Kenneth J
fuente
1
... no hay ningún atributo "id" en el <input>elemento; esto solo funcionaría en IE porque IE está roto.
Puntiagudo
lo siento, pensé que había un ID, document.getElementsByName ("pregunta") [0] .value, o simplemente agregue un ID al elemento
Kenneth J
1

Simplemente agregue una etiqueta de identificación al elemento de entrada ... es decir:

y verifique el valor del elemento en su javascript:

document.getElementById ("pregunta"). valor

Oh sí, obtén firefox / firebug. Es la única forma de hacer javascript.

Bal
fuente
0

Mi solución a continuación está en es6 porque utilicé constsi lo prefieres es5, puedes reemplazar todo constcon 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 fragmento

Fortuna de Kingston
fuente
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 fragmento

antes de usar el código anterior, debe agregar el archivo gen_validatorv31.js

Ravindra Bohra
fuente
0

Combinando todos los enfoques podemos hacer algo como esto:

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 fragmento

Tenga en cuenta que si realmente desea verificar los valores, debe hacerlo en el servidor, pero esto está fuera del alcance de esta pregunta.

A. Meshu
fuente
0

Puede recorrer cada entrada después de enviarla y verificar si está vacía

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
fuente
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 fragmento

Rizki Fauji
fuente
Hola, cuando esté proporcionando una solución, sería genial proporcionar una razón por la cual su solución soluciona el problema, lo que podría ayudar a los futuros lectores.
Ehsan Mahmud