Validation JavaScript pour le champ de saisie vide

95

J'ai ce champ d'entrée <input name="question"/>Je veux appeler la fonction IsEmpty lors de la soumission en cliquant sur le bouton Soumettre.

J'ai essayé le code ci-dessous mais je n'ai pas fonctionné. aucun conseil?

<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>
Développer l'extrait

javascript Eyla
la source
Vous avez accepté une réponse invalide . La vérification de null est étrange car une entrée (ou zone de texte) renvoie toujours une chaîne. De plus, vous ne devez pas utiliser de JavaScript en ligne. Aussi, vous ne devriez pas utiliser aveuglément return false... etc etc
Roko C. Buljan

Réponses:

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>
Développer l'extrait

Sk Mourya
la source
2
'onsubmit = "return validate ()"' doit être modifié. validate n'est pas le nom de la fonction. Il devrait être 'onsubmit = "return validateForm ()"'
tazboy
3
Il serait préférable d'expliquer la réponse et le doute d'OP.
Vishal
7
Ce accepté est en fait invalide. Les virgules dans l' ifinstruction entraîneront uniquement le retour de la dernière vérification: stackoverflow.com/a/5348007/713874
Bing
35

Voir l'exemple de travail ici

Il vous manque l' <form>élément requis . Voici à quoi devrait ressembler votre code:

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>
Développer l'extrait

Sarfraz
la source
Existe-t-il un moyen de le faire pour tous les champs des formulaires?
sparecycle
34

Un champ de saisie peut avoir des espaces , nous voulons éviter cela.
Utilisez String.prototype.trim () :

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

Exemple:

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">
Développer l'extrait

Roko C. Buljan
la source
1
Outre null et "", mon code me manquait également. Cela a fonctionné pour moi. Merci Roko.
Pedro Sousa
17

Je voudrais ajouter l'attribut requis au cas où l'utilisateur aurait désactivé le javascript:

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

Cela fonctionne sur tous les navigateurs modernes.

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

Ajoutez un identifiant "question" à votre élément d'entrée, puis essayez ceci:

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

La raison pour laquelle votre code actuel ne fonctionne pas est que vous ne disposez pas de balise FORM. De plus, la recherche à l'aide de "nom" n'est pas recommandée car elle est obsolète.

Voir la réponse de @Paul Dixon dans cet article: L'attribut 'name' est-il considéré comme obsolète pour les balises d'ancrage <a>?

Rajat
la source
1 
if(document.getElementById("question").value == "")
{
    alert("empty")
}
Kenneth J
la source
1
... il n'y a pas d'attribut "id" sur l' <input>élément; cela ne fonctionnerait que dans IE car IE est cassé.
Pointy
désolé, je pensais qu'il y avait un ID, document.getElementsByName ("question") [0] .value, ou ajoutez simplement un ID à l'élément
Kenneth J
1

Ajoutez simplement une étiquette d'identification à l'élément d'entrée ... c'est-à-dire:

et vérifiez la valeur de l'élément dans votre javascript:

document.getElementById ("question"). value

Oh oui, obtenez firefox / firebug. C'est la seule façon de faire du javascript.

Bal
la source
0

Ma solution ci-dessous est en es6 car j'ai utilisé constsi vous préférez es5, vous pouvez tout remplacer constpar 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";
}
Développer l'extrait

Kingston Fortune
la source
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>
Développer l'extrait

avant d'utiliser le code ci-dessus, vous devez ajouter le fichier gen_validatorv31.js

Ravindra Bohra
la source
0

En combinant toutes les approches, nous pouvons faire quelque chose comme ceci:

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 />
Développer l'extrait

Notez que si vous voulez vraiment vérifier les valeurs, vous devez le faire sur le serveur, mais cela est hors de portée de cette question.

A. Meshu
la source
0

Vous pouvez parcourir chaque entrée après la soumission et vérifier si elle est vide

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
la source
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>
Développer l'extrait

Rizki Fauji
la source
Bonjour, lorsque vous fournissez une solution, il serait bon de fournir une raison pour laquelle votre solution résout le problème qui pourrait aider les futurs lecteurs.
Ehsan Mahmud