Validasi JavaScript untuk bidang masukan kosong

Question 1

Saya memiliki kolom input ini yang <input name="question"/>ingin saya panggil fungsi IsEmpty saat mengirimkan mengklik tombol kirim.

Saya mencoba kode di bawah ini tetapi tidak berhasil. ada saran?

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

Luaskan cuplikan

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>

Luaskan cuplikan

Question 3

Lihat contoh kerja di sini

Anda kehilangan <form>elemen yang dibutuhkan . Beginilah seharusnya kode Anda:

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>

Luaskan cuplikan

Question 4

Bidang masukan dapat memiliki spasi putih , kami ingin mencegahnya.
Gunakan String.prototype.trim () :

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

Contoh:

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

Luaskan cuplikan

Question 5

Saya ingin menambahkan atribut yang diperlukan jika pengguna menonaktifkan javascript:

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

Ini berfungsi di semua browser modern.

Question 6

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

Question 7

Tambahkan "pertanyaan" id ke elemen masukan Anda, lalu coba ini:

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

Alasan kode Anda saat ini tidak berfungsi adalah karena Anda tidak memiliki tag FORM di sana. Selain itu, pencarian menggunakan "nama" tidak disarankan karena sudah usang.

Lihat jawaban @Paul Dixon di posting ini: Apakah atribut 'name' dianggap ketinggalan jaman untuk <a> tag anchor?

Question 8

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

Question 9

Cukup tambahkan tag ID ke elemen input ... yaitu:

dan periksa nilai elemen di javascript Anda:

document.getElementById ("pertanyaan"). nilai

Oh ya, dapatkan firefox / firebug. Ini satu-satunya cara untuk menggunakan javascript.

Question 10

Solusi saya di bawah ini ada di es6 karena saya memanfaatkan constjika Anda lebih suka es5 Anda dapat mengganti semua constdengan 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";
}

Luaskan cuplikan

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>

Luaskan cuplikan

sebelum menggunakan kode di atas Anda harus menambahkan file gen_validatorv31.js

Question 12

Menggabungkan semua pendekatan kita dapat melakukan sesuatu seperti ini:

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

Luaskan cuplikan

Perhatikan bahwa jika Anda benar-benar ingin memeriksa nilai, Anda harus melakukannya di server, tetapi ini di luar cakupan pertanyaan ini.

Question 13

Anda dapat mengulang setiap masukan setelah mengirimkan dan memeriksa apakah sudah kosong

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>

Luaskan cuplikan

Answer 1

Saya memiliki kolom input ini yang <input name="question"/>ingin saya panggil fungsi IsEmpty saat mengirimkan mengklik tombol kirim.

Saya mencoba kode di bawah ini tetapi tidak berhasil. ada saran?

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

Luaskan cuplikan

Answer 2

Anda menerima jawaban yang tidak valid . Memeriksa null ganjil karena input (atau textarea) selalu mengembalikan String. Selain itu, Anda tidak boleh menggunakan JavaScript sebaris. Juga Anda tidak boleh menggunakan secara membabi buta return false... dll dll

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>

Luaskan cuplikan

Answer 4

2

'onsubmit = "return validate ()"' perlu diubah. validate bukanlah nama fungsinya. Seharusnya 'onsubmit = "return validateForm ()"'

tazboy

Answer 5

3

Akan lebih baik untuk menjelaskan jawaban dan keraguan OP.

Vishal

Answer 6

7

Ini diterima sebenarnya tidak valid. Koma dalam ifpernyataan hanya akan menyebabkan pengecekan terakhir dikembalikan: stackoverflow.com/a/5348007/713874

Bing

Answer 7

Lihat contoh kerja di sini

Anda kehilangan <form>elemen yang dibutuhkan . Beginilah seharusnya kode Anda:

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>

Luaskan cuplikan

Answer 8

Apakah ada cara untuk melakukan ini untuk semua bidang dalam formulir?

Sparecycle

Answer 9

Bidang masukan dapat memiliki spasi putih , kami ingin mencegahnya.
Gunakan String.prototype.trim () :

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

Contoh:

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

Luaskan cuplikan

Answer 10

1

Selain null dan "", kode saya, saya juga kehilangan bagian ini. Itu berhasil untuk saya. Terima kasih Roko.

Pedro Sousa

Answer 11

17

Saya ingin menambahkan atribut yang diperlukan jika pengguna menonaktifkan javascript:

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

Ini berfungsi di semua browser modern.

Atif Tariq
sumber

Answer 12

10

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

Jak Samun
sumber

Answer 13

Tambahkan "pertanyaan" id ke elemen masukan Anda, lalu coba ini:

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

Alasan kode Anda saat ini tidak berfungsi adalah karena Anda tidak memiliki tag FORM di sana. Selain itu, pencarian menggunakan "nama" tidak disarankan karena sudah usang.

Lihat jawaban @Paul Dixon di posting ini: Apakah atribut 'name' dianggap ketinggalan jaman untuk <a> tag anchor?

Answer 14

1

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

Kenneth J.
sumber

1

... tidak ada atribut "id" pada <input>elemen; ini hanya akan berfungsi di IE karena IE rusak.

Pointy

maaf, saya pikir ada ID, document.getElementsByName ("question") [0] .value, atau cukup tambahkan ID ke elemen

Kenneth J

Answer 15

1

... tidak ada atribut "id" pada <input>elemen; ini hanya akan berfungsi di IE karena IE rusak.

Pointy

Answer 16

maaf, saya pikir ada ID, document.getElementsByName ("question") [0] .value, atau cukup tambahkan ID ke elemen

Kenneth J

Answer 17

Cukup tambahkan tag ID ke elemen input ... yaitu:

dan periksa nilai elemen di javascript Anda:

document.getElementById ("pertanyaan"). nilai

Oh ya, dapatkan firefox / firebug. Ini satu-satunya cara untuk menggunakan javascript.

Answer 18

Solusi saya di bawah ini ada di es6 karena saya memanfaatkan constjika Anda lebih suka es5 Anda dapat mengganti semua constdengan 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";
}

Luaskan cuplikan

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>

Luaskan cuplikan

sebelum menggunakan kode di atas Anda harus menambahkan file gen_validatorv31.js

Answer 20

Menggabungkan semua pendekatan kita dapat melakukan sesuatu seperti ini:

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

Luaskan cuplikan

Perhatikan bahwa jika Anda benar-benar ingin memeriksa nilai, Anda harus melakukannya di server, tetapi ini di luar cakupan pertanyaan ini.

Answer 21

Anda dapat mengulang setiap masukan setelah mengirimkan dan memeriksa apakah sudah kosong

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>

Luaskan cuplikan

Answer 23

Hai, ketika Anda memberikan solusi, akan sangat bagus untuk memberikan alasan mengapa solusi Anda memperbaiki masalah yang mungkin dapat membantu pembaca di masa mendatang.

Ehsan Mahmud

Validasi JavaScript untuk bidang masukan kosong

Jawaban:

Lihat contoh kerja di sini