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

JavaScript-Validierung für leeres Eingabefeld

Antworten:

Siehe das Arbeitsbeispiel hier