Validating newly created elements

Question

i have problem when i use input type file

the code is like this below,

default input file :

<div id="div_attachment">
   <input name="f_attachment[]" type="file" class="file" id="f_attachment">
   <input type="button" id="tb_more_files" value="more file"/>
</div>

and jquery code :

$("input#tb_more_files").click(function(){
   var new_file = $("<div><input id='f_attachment' name='f_attachment[]' type='file' class='file'/><input type='button' id='tb_remove' class='remove_file'></div>");
   $("div#div_attachment").append(new_file);
});

and i validate extension of attachment file with this :

f_attachment = $("input#f_attachment").val();
FileType = f_attachment.split('.').pop().toLowerCase();

   if(f_attachment == null || f_attachment == ""){
       alert("Attachment is Empty");
   }else if($.inArray(FileType, ['gif','png','jpg','jpeg']) == -1){
       alert("Invalid Type of File Attachment");
   }

and the problem is, when i clicked more file button and input file element is appear, i cannot validate it when it have empty or null value or different file type validation!

i try with .live() method, but i dont know how...

please help!

Answer 1

Created a complete fiddle for you; http://jsfiddle.net/7KLA6/

UPDATE Adding the code on request

HTML

<form name="myForm" enctype="multipart/form-data" method="post" action="">

<div id="div_attachment">
   <input name="f_attachment[]" type="file" class="file" id="f_attachment">
   <input type="button" id="tb_more_files" value="Add extra file" />
</div>

<input type="submit" id="submit_button" value="Submit form" />

</form>

JavaScript

// Add file input
$("input#tb_more_files").click(function() {

    var new_file = $("<div><input name='f_attachment[]' type='file' class='file'/><input type='button' class='remove_file' value='Remove' /></div>");
    $("div#div_attachment").append(new_file);

});

// Remove added file input
$('#div_attachment').on('click', 'input.remove_file', function() {

    $(this).parent().remove();

});

// Validate on submit
$('form').submit(function() {

    var $form = $(this);
    var validForm = true;

    $form.find('input.file').each(function() {

        var $this = $(this);
        var fileName = $this.val();
        var fileType = fileName.split('.').pop().toLowerCase();

        if (fileName == null || fileName == "") {
            console.log("Attachment is Empty"); // DEBUG
            validForm = false;
        } else if ($.inArray(fileType, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            console.log("Invalid Type of File Attachment"); // DEBUG
            validForm = false;
        }

        if (!validForm) {
            $this.css('color', 'red').focus();
            // Notice that only the last input will get the focus.
        }
    });

    console.log('Valid form =', validForm); // DEBUG
    return validForm;
});