在運行時添加元素的驗證

我正在使用以下腳本將圖像輸入字段添加到我的網頁。一切工作正常，但如果我想要做驗證呢。如果任何字段爲空，我不想提交表單。我嘗試了代碼，即函數validate()，但它只檢查第一個輸入字段，即html的輸入字段。在Jquery的幫助下，它在運行時添加的輸入字段不起作用。在運行時添加元素的驗證

<script type="text/javascript"> 
    function validate() { 
      var file = document.getElementById('file').value; 
      if(file==""){ 
       alert("None of the Image Fields can be empty!!"); 
      return false; 
      } 
    } 
    $(document).ready(function(){ 

     $('#addproduct').click(function(){     
     $(this).after('<br /><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> '); 
     });  
    }); 

    </script>

我想爲圖像字段添加刪除功能。就像每個輸入字段旁邊的十字按鈕一樣，單擊該按鈕時該字段將被刪除。

<input type="file" name="image_name[]" id="file" required="true"> 
<input type="text" name="image_caption[]" placeholder="Caption for this image " size="60"> 
<span id="addproduct"></span>

來源

2013-02-07 prakashchhetri

在jQuery的環境中，你不應該使用'document.getElementById'，你也不應該產生嵌入HTML這樣的 - 通過創建jQuery的DOM元素傳遞它們的參數以保持代碼更易於維護！ – moonwave99

代替document.getElementById('file')使用document.getElementsByName('image_name[]')或jQuery的風格$('[name="image_name[]"]')。這是因爲標籤的id必須是唯一的，否則只有第一個可以被id引用。

對於刪除功能的使用是這樣的：

$(document).ready(function(){ 

    $('#addproduct').click(function(){     
    $(this).after('<br /><div><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> <input type="button" value="Delete" onclick="deleteRow(this)" /> </div>'); 
    });  
}); 

var deleteRow = function(elem) { 
    $(elem).parent().remove(); 
}

來源

2013-02-07 15:30:31 Birla

在運行時添加元素的驗證

回答

相關問題