Validation JavaScript pour le champ de saisie vide

Question 1

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

Question 2

<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

Question 3

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

Question 4

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

Question 5

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.

Question 6

if(document.getElementById("question").value.length == 0)
{
    alert("empty")
}

Question 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>?

Question 8

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

Question 9

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.

Question 10

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

Question 11

<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

Question 12

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.

Question 13

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 :)
  } 
})

Question 14

<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