JavaScript-Validierung für leeres Eingabefeld

95

Ich habe dieses Eingabefeld, das <input name="question"/>ich beim Senden auf die Schaltfläche IsEmpty aufrufen möchte.

Ich habe den folgenden Code ausprobiert, aber nicht funktioniert. irgendein Rat?

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

Erweitern Sie das Snippet

javascript

— Eyla
quelle

Sie haben eine ungültige Antwort akzeptiert . Das Überprüfen auf Null ist ungerade, da eine Eingabe (oder ein Textbereich) immer einen String zurückgibt. Außerdem sollten Sie kein Inline-JavaScript verwenden. Auch sollten Sie nicht blind verwenden return false... etc etc

— Roko C. Buljan

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>

Erweitern Sie das Snippet

— Sk Mourya
quelle

2

'onsubmit = "return validate ()"' muss geändert werden. validate ist nicht der Name der Funktion. Es sollte 'onsubmit = "return validateForm ()" sein'

— tazboy

3

Es wäre am besten, die Antwort und die Zweifel von OP zu erklären.

— Vishal

7

Dies akzeptiert ist tatsächlich ungültig. Die Kommas in der ifAnweisung bewirken, dass nur die letzte Prüfung zurückgegeben wird: stackoverflow.com/a/5348007/713874

— Bing

35

Siehe das Arbeitsbeispiel hier

Ihnen fehlt das gewünschte <form>Element. So sollte Ihr Code aussehen:

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>

Erweitern Sie das Snippet

— Sarfraz
quelle

Gibt es eine Möglichkeit, dies für alle Felder in Formularen zu tun?

— Sparecycle

34

Ein Eingabefeld kann Leerzeichen haben , das möchten wir verhindern.
Verwenden Sie String.prototype.trim () :

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

Beispiel:

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

Erweitern Sie das Snippet

— Roko C. Buljan
quelle

1

Neben null und "", meinem Code, fehlte mir auch dieses Stück. Es hat bei mir funktioniert. Danke Roko.

— Pedro Sousa

17

Ich möchte das erforderliche Attribut hinzufügen, falls der Benutzer Javascript deaktiviert:

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

Es funktioniert auf allen modernen Browsern.

— Atif Tariq
quelle

10

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

— Jak Samun
quelle

7

Fügen Sie Ihrem Eingabeelement eine ID "Frage" hinzu und versuchen Sie Folgendes:

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

Der Grund, warum Ihr aktueller Code nicht funktioniert, ist, dass Sie dort kein FORM-Tag haben. Außerdem wird die Suche mit "Name" nicht empfohlen, da sie veraltet ist.

Siehe die Antwort von @Paul Dixon in diesem Beitrag: Wird das Attribut 'name' für <a> Ankertags als veraltet angesehen?

— Rajat
quelle

1

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

— Kenneth J.
quelle

1

... es gibt kein "id" -Attribut für das <input>Element; Dies würde nur im IE funktionieren, da der IE defekt ist.

— Pointy

Entschuldigung, ich dachte, es gäbe eine ID, document.getElementsByName ("question") [0] .value, oder füge einfach eine ID zum Element hinzu

— Kenneth J

1

Fügen Sie dem Eingabeelement einfach ein ID-Tag hinzu ... dh:

und überprüfen Sie den Wert des Elements in Ihrem Javascript:

document.getElementById ("Frage"). Wert

Oh ja, hol dir Firefox / Firebug. Dies ist die einzige Möglichkeit, Javascript zu erstellen.

— Bal
quelle

0

Meine Lösung unten ist in es6, weil ich verwendet habe, constwenn Sie es5 bevorzugen, können Sie alle constdurch ersetzen 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";
}

Erweitern Sie das Snippet

— Kingston Fortune
quelle

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>

Erweitern Sie das Snippet

Bevor Sie den obigen Code verwenden können, müssen Sie die Datei gen_validatorv31.js hinzufügen

— Ravindra Bohra
quelle

0

Wenn wir alle Ansätze kombinieren, können wir so etwas tun:

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

Erweitern Sie das Snippet

Beachten Sie, dass Sie dies auf dem Server tun sollten, wenn Sie wirklich Werte überprüfen möchten. Dies liegt jedoch außerhalb des Bereichs für diese Frage.

— A. Meshu
quelle

0

Sie können jede Eingabe nach dem Senden durchlaufen und prüfen, ob sie leer ist

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
quelle

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>

Erweitern Sie das Snippet

— Rizki Fauji
quelle

Hallo, wenn Sie eine Lösung anbieten, wäre es großartig, einen Grund anzugeben, warum Ihre Lösung das Problem behebt, das den zukünftigen Lesern helfen könnte.

— Ehsan Mahmud