Перевірка JavaScript для порожнього поля введення

Question 1

У мене є це поле введення, яке <input name="question"/>я хочу викликати функцію IsEmpty під час надсилання, натиснувши кнопку "Відправити".

Я спробував код нижче, але не працював. будь-яка порада?

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

Розгорніть фрагмент

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>

Розгорніть фрагмент

Question 3

Дивіться робочий приклад тут

Вам не вистачає необхідного <form>елемента. Ось яким має бути ваш код:

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>

Розгорніть фрагмент

Question 4

Поле введення може мати пробіли , ми хочемо запобігти цьому.
Використовуйте String.prototype.trim () :

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

Приклад:

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

Розгорніть фрагмент

Question 5

Я хотів би додати необхідний атрибут на випадок, якщо користувач вимкнув javascript:

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

Він працює на всіх сучасних браузерах.

Question 6

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

Question 7

Додайте ідентифікатор "питання" до елемента введення, а потім спробуйте наступне:

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

Причина, по якій ваш поточний код не працює, полягає у тому, що у вас немає тегу FORM. Також пошук із використанням "name" не рекомендується, оскільки його застарілий.

Дивіться відповідь @Paul Dixon у цій публікації: Чи вважається атрибут 'name' застарілим для <a> прив'язних тегів?

Question 8

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

Question 9

Просто додайте тег ID до елемента введення ... тобто:

і перевірте значення елемента у вашому javascript:

document.getElementById ("питання"). значення

Ах, дістаньте firefox / firebug. Це єдиний спосіб зробити javascript.

Question 10

Моє рішення нижче в es6, тому що я використав, constякщо ви віддаєте перевагу es5, ви можете замінити все constна 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";
}

Розгорніть фрагмент

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>

Розгорніть фрагмент

перед використанням наведеного вище коду вам потрібно додати файл gen_validatorv31.js

Question 12

Поєднуючи всі підходи, ми можемо зробити щось подібне:

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

Розгорніть фрагмент

Зверніть увагу, що якщо ви справді хочете перевірити значення, ви повинні це робити на сервері, але це поза рамками цього питання.

Question 13

Ви можете переглядати кожен ввід після подання та перевіряти, чи він не пустий

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>

Розгорніть фрагмент