JavaScript文本框驗證不起作用？

Question

昨天我大部分時間都在嘗試解決這個問題，但是沒有運氣-我對Javascript還是很陌生，所以請多多包涵。 我正在嘗試創建一個問卷，作為要求我做的項目的一部分。

我有以下代碼，該代碼創建了一定數量的文本框供用戶輸入問題-他們選擇希望創建多少個文本框/問題。 這是執行文本框創建並將用戶希望創建的問題數量傳遞給Javascript的代碼：

     <?php
       //Loop for question textboxes
       for ( $i = 1; $i <= intval($_SESSION['Questions']); $i++ ) { 
         echo"
           <b>Question ". $i  ."</b><br>
           <input type='text' style='width: 42em;' name='box{$i}' id='box{$i}'>
           <br><br>
         "; 
       }
       echo'
         <br>
         <input type='.Submit.'>
         <br><br>
       ';              

     ?>

     <script>
       var Questions = <?php echo json_encode($_SESSION['Questions']); ?>;
     </script>

然后提交表單：

function QuestionsValidation(f) {

        var msg = "";

        for (i = 1; i <= Questions; i++) {
          if (f.box+i.value == "") {
              msg += "Question" +i "empty!\n";                
          }
        }

        if (msg !== "") {
            alert ("Errors in form:\n" + msg);
          return false;
        }

        else {
          return true;
        }
}

我幾乎可以肯定，它不起作用的原因是在javascript For循環內的IF語句中，但是我很感謝任何建議。 我在For循環中刪除了IF語句，並將其替換為：

        for (i = 1; i <= Questions; i++) {
          msg += f.box+i.value;                
        }

嘗試找出問題的根源。它返回NaN嗎？

Answer 1

通過循環創建文本框時，為每個文本框添加一個類，例如

<input type='text' class='question' style='width: 42em;' name='box{$i}' id='box{$i}'>

在提交按鈕上，調用validateQuestions（）函數，例如

<input type='submit' onclick='return validateQuestions();' value='Submit' />

編寫以下jQuery代碼

$(function(){
function validateQuestions(){
     $('.question').each(function(){
        if ($(this).val()==''){
            alert('Question is required.'); // or write error msg in a div
            $(this).focus();
            return false;
        }
     })
}        
})

注意：也嘗試閱讀jQuery Validation插件。

希望這可以幫助 ！