Walidacja JavaScript dla pustego pola wejściowego

Question 1

Mam to pole wejściowe, <input name="question"/>które chcę wywołać funkcję IsEmpty po przesłaniu, klikając przycisk przesyłania.

Wypróbowałem poniższy kod, ale nie zadziałał. jakakolwiek rada?

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

Rozwiń fragment

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>

Rozwiń fragment

Question 3

Zobacz przykład roboczy tutaj

Brakuje wymaganego <form>elementu. Oto jak powinien wyglądać Twój kod:

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>

Rozwiń fragment

Question 4

Pole wejściowe może zawierać spacje , chcemy temu zapobiec.
Użyj String.prototype.trim () :

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

Przykład:

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

Rozwiń fragment

Question 5

Chciałbym dodać wymagany atrybut na wypadek wyłączenia javascript przez użytkownika:

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

Działa na wszystkich nowoczesnych przeglądarkach.

Question 6

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

Question 7

Dodaj identyfikator „pytanie” do elementu wejściowego, a następnie spróbuj tego:

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

Twój obecny kod nie działa, ponieważ nie masz w nim tagu FORM. Ponadto wyszukiwanie przy użyciu „nazwy” nie jest zalecane, ponieważ jest przestarzałe.

Zobacz odpowiedź @Paul Dixon w tym poście: Czy atrybut „name” jest uważany za nieaktualny dla <a> tagów kotwicy?

Question 8

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

Question 9

Po prostu dodaj identyfikator do elementu wejściowego ... tj .:

i sprawdź wartość elementu w swoim javascript:

document.getElementById ("pytanie"). wartość

O tak, pobierz firefox / firebug. To jedyny sposób na wykonanie javascript.

Question 10

Poniżej moje rozwiązanie jest w ES6 bo wykorzystały constjeśli wolisz ES5 można zastąpić wszystko constz 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";
}

Rozwiń fragment

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>

Rozwiń fragment

przed użyciem powyższego kodu musisz dodać plik gen_validatorv31.js

Question 12

Łącząc wszystkie podejścia, możemy zrobić coś takiego:

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

Rozwiń fragment

Zauważ, że jeśli naprawdę chcesz sprawdzić wartości, powinieneś to zrobić na serwerze, ale to jest poza zakresem tego pytania.

Question 13

Możesz przejrzeć każde wejście po przesłaniu i sprawdzić, czy jest puste

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>

Rozwiń fragment

Answer 1

Mam to pole wejściowe, <input name="question"/>które chcę wywołać funkcję IsEmpty po przesłaniu, klikając przycisk przesyłania.

Wypróbowałem poniższy kod, ale nie zadziałał. jakakolwiek rada?

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

Rozwiń fragment

Answer 2

Przyjąłeś nieprawidłową odpowiedź . Sprawdzanie wartości null jest nieparzyste, ponieważ dane wejściowe (lub obszar tekstowy) zawsze zwracają ciąg. Nie powinieneś także używać wbudowanego JavaScript. Nie powinieneś też używać na ślepo return false... itd. Itd.

Roko C. Buljan

Answer 3

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

Rozwiń fragment

Answer 4

2

„onsubmit =" return validate () "'wymaga zmiany. validate nie jest nazwą funkcji. Powinien to być „onsubmit =" return validateForm () "'

tazboy

Answer 5

3

Najlepiej byłoby wyjaśnić odpowiedź i wątpliwości OP.

Vishal

Answer 6

7

To zaakceptowane jest w rzeczywistości nieważne. Przecinki w ifinstrukcji spowodują zwrócenie tylko ostatniego czeku: stackoverflow.com/a/5348007/713874

Bing

Answer 7

Zobacz przykład roboczy tutaj

Brakuje wymaganego <form>elementu. Oto jak powinien wyglądać Twój kod:

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>

Rozwiń fragment

Answer 8

Czy można to zrobić dla wszystkich pól w formularzach?

rower zapasowy

Answer 9

Pole wejściowe może zawierać spacje , chcemy temu zapobiec.
Użyj String.prototype.trim () :

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

Przykład:

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

Rozwiń fragment

Answer 10

1

Oprócz null i „”, w moim kodzie brakowało również tego elementu. U mnie zadziałało. Dzięki Roko.

Pedro Sousa

Answer 11

Chciałbym dodać wymagany atrybut na wypadek wyłączenia javascript przez użytkownika:

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

Działa na wszystkich nowoczesnych przeglądarkach.

Answer 12

10

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

Jak Samun
źródło

Answer 13

Dodaj identyfikator „pytanie” do elementu wejściowego, a następnie spróbuj tego:

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

Twój obecny kod nie działa, ponieważ nie masz w nim tagu FORM. Ponadto wyszukiwanie przy użyciu „nazwy” nie jest zalecane, ponieważ jest przestarzałe.

Zobacz odpowiedź @Paul Dixon w tym poście: Czy atrybut „name” jest uważany za nieaktualny dla <a> tagów kotwicy?

Answer 14

1

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

Kenneth J.
źródło

1

... nie ma atrybutu „id” w <input>elemencie; działałoby to tylko w IE, ponieważ IE jest uszkodzony.

Pointy

przepraszam, myślałem, że istnieje ID, document.getElementsByName ("question") [0] .value, lub po prostu dodaj identyfikator do elementu

Kenneth J

Answer 15

1

... nie ma atrybutu „id” w <input>elemencie; działałoby to tylko w IE, ponieważ IE jest uszkodzony.

Pointy

Answer 16

przepraszam, myślałem, że istnieje ID, document.getElementsByName ("question") [0] .value, lub po prostu dodaj identyfikator do elementu

Kenneth J

Answer 17

Po prostu dodaj identyfikator do elementu wejściowego ... tj .:

i sprawdź wartość elementu w swoim javascript:

document.getElementById ("pytanie"). wartość

O tak, pobierz firefox / firebug. To jedyny sposób na wykonanie javascript.

Answer 18

Poniżej moje rozwiązanie jest w ES6 bo wykorzystały constjeśli wolisz ES5 można zastąpić wszystko constz 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";
}

Rozwiń fragment

Answer 19

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

Rozwiń fragment

przed użyciem powyższego kodu musisz dodać plik gen_validatorv31.js

Answer 20

Łącząc wszystkie podejścia, możemy zrobić coś takiego:

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

Rozwiń fragment

Zauważ, że jeśli naprawdę chcesz sprawdzić wartości, powinieneś to zrobić na serwerze, ale to jest poza zakresem tego pytania.

Answer 21

Możesz przejrzeć każde wejście po przesłaniu i sprawdzić, czy jest puste

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

Answer 22

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

Rozwiń fragment

Answer 23

Cześć, kiedy zapewniasz rozwiązanie, byłoby wspaniale podać powód, dla którego twoje rozwiązanie rozwiązuje problem, co może pomóc przyszłym czytelnikom.

Ehsan Mahmud

Walidacja JavaScript dla pustego pola wejściowego

Odpowiedzi:

Zobacz przykład roboczy tutaj