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