Xác thực JavaScript cho trường nhập trống

Question 1

Tôi có trường đầu vào này, <input name="question"/>tôi muốn gọi hàm IsEmpty khi gửi nhấp vào nút gửi.

Tôi đã thử mã bên dưới nhưng không hoạt động. bất kỳ lời khuyên?

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

Mở rộng đoạn mã

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>

Mở rộng đoạn mã

Question 3

Xem ví dụ làm việc tại đây

Bạn đang thiếu <form>yếu tố bắt buộc . Đây là cách mã của bạn sẽ như thế nào:

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>

Mở rộng đoạn mã

Question 4

Một trường đầu vào có thể có khoảng trắng , chúng tôi muốn ngăn chặn điều đó.
Sử dụng String.prototype.trim () :

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

Thí dụ:

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

Mở rộng đoạn mã

Question 5

Tôi muốn thêm thuộc tính bắt buộc trong trường hợp người dùng tắt javascript:

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

Nó hoạt động trên tất cả các trình duyệt hiện đại.

Question 6

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

Question 7

Thêm một "câu hỏi" id vào phần tử đầu vào của bạn và sau đó thử điều này:

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

Lý do mã hiện tại của bạn không hoạt động là vì bạn không có thẻ FORM trong đó. Ngoài ra, tra cứu bằng cách sử dụng "name" không được khuyến khích vì nó không được dùng nữa.

Xem câu trả lời của @Paul Dixon trong bài đăng này: Thuộc tính 'name' có bị coi là lỗi thời đối với thẻ neo <a> không?

Question 8

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

Question 9

Chỉ cần thêm thẻ ID vào phần tử đầu vào ... tức là:

và kiểm tra giá trị của phần tử trong javascript của bạn:

document.getElementById ("câu hỏi"). value

Oh ya, tải firefox / firebug. Đó là cách duy nhất để làm javascript.

Question 10

Giải pháp của tôi bên dưới là trong es6 vì tôi đã sử dụng constnếu bạn thích es5, bạn có thể thay thế tất cả constbằng 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";
}

Mở rộng đoạn mã

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>

Mở rộng đoạn mã

trước khi sử dụng mã trên, bạn phải thêm tệp gen_validatorv31.js

Question 12

Kết hợp tất cả các phương pháp, chúng ta có thể làm điều gì đó như sau:

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

Mở rộng đoạn mã

Lưu ý rằng nếu bạn thực sự muốn kiểm tra các giá trị, bạn nên làm điều đó trên máy chủ, nhưng điều này nằm ngoài phạm vi cho câu hỏi này.

Question 13

Bạn có thể lặp lại từng đầu vào sau khi nhấn phụ và kiểm tra xem nó có trống không

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>

Mở rộng đoạn mã