Проверка 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

Добавьте id "вопрос" в свой элемент ввода и попробуйте следующее:

   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>

Развернуть фрагмент

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

Развернуть фрагмент

Answer 2

Вы приняли неверный ответ . Проверка на null нечетная, так как input (или textarea) всегда возвращает String. Кроме того, вы не должны использовать встроенный JavaScript. Также вы не должны использовать вслепую return false... и т. Д. И т. Д.

Роко

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>

Развернуть фрагмент

Answer 4

2

'onsubmit = "return validate ()"' необходимо изменить. validate - это не имя функции. Это должно быть 'onsubmit = "return validateForm ()"'

tazboy

Answer 5

3

Было бы лучше объяснить ответ и сомнения ОП.

Vishal

Answer 6

7

Это принятое на самом деле недействительно. Запятые в ifзаявлении приведут к возврату только последней проверки: stackoverflow.com/a/5348007/713874

Bing

Answer 7

См. Рабочий пример здесь

Вам не хватает необходимого <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>

Развернуть фрагмент

Answer 8

Есть ли способ сделать это для всех полей в формах?

Sparecycle

Answer 9

В поле ввода могут быть пробелы , мы хотим предотвратить это.
Используйте 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">

Развернуть фрагмент

Answer 10

1

Помимо null и "", в моем коде мне также не хватало этого фрагмента. У меня это сработало. Спасибо, Роко.

Педро Соуза

Answer 11

Я хотел бы добавить обязательный атрибут на случай, если пользователь отключил javascript:

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

Работает во всех современных браузерах.

Answer 12

10

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

Джак Самун
источник

Answer 13

Добавьте id "вопрос" в свой элемент ввода и попробуйте следующее:

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

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

См. Ответ @Paul Dixon в этом сообщении: Считается ли атрибут 'name' устаревшим для тегов привязки <a>?

Answer 14

1

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

Кеннет Дж.
источник

1

... у <input>элемента нет атрибута id ; это будет работать только в IE, потому что IE сломан.

Pointy

извините, я думал, что это идентификатор, document.getElementsByName ("question") [0] .value, или просто добавьте идентификатор к элементу

Kenneth J

Answer 15

1

... у <input>элемента нет атрибута id ; это будет работать только в IE, потому что IE сломан.

Pointy

Answer 16

извините, я думал, что это идентификатор, document.getElementsByName ("question") [0] .value, или просто добавьте идентификатор к элементу

Kenneth J

Answer 17

Просто добавьте тег ID к элементу ввода ... то есть:

и проверьте значение элемента в вашем javascript:

document.getElementById ("вопрос"). значение

О да, получите firefox / firebug. Это единственный способ сделать javascript.

Answer 18

Мое решение, приведенное ниже, находится в 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";
}

Развернуть фрагмент

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>

Развернуть фрагмент

перед использованием приведенного выше кода вам необходимо добавить файл gen_validatorv31.js

Answer 20

Объединив все подходы, мы можем сделать что-то вроде этого:

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

Развернуть фрагмент

Обратите внимание: если вы действительно хотите проверить значения, вы должны сделать это на сервере, но это выходит за рамки этого вопроса.

Answer 21

Вы можете просмотреть каждый ввод после отправки и проверить, пуст ли он

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>

Развернуть фрагмент

Answer 23

Привет, когда вы предоставляете решение, было бы здорово указать причину, по которой ваше решение устраняет проблему, которая может помочь будущим читателям.

Эхсан Махмуд

Проверка JavaScript для пустого поля ввода

Ответы:

См. Рабочий пример здесь