验证新创建的元素

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

$('#div_attachment').on("change",".file", function(event) {
  value = $(this).val(); // the value of the file element
  // do validation
});

this listens to the change event on all elements with the class file within the element div_attachment (your parent div) and processes your validation. Using on() means that even newly created DOM elements will have the event handler applied

One thing you need to be careful of is using the same ID for multiple elements - you are better using a class.

Update

To perform the check onsubmit() use the each() method :

$('.file').each(function(index) {
    value = $(this).val();
    // some validation for $(this) using value
});

NOTE: Using the $('.file') selector gets all the elements with the class file

Docs for each() , Docs for on()

Answer 2

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;
});

Answer 3

<form name="myForm" enctype="multipart/form-data" action="" onsubmit="return  validateForm()" method="post">
        <input type="file" id="browse" name="browse" size="" placeholder="Photo" class="upload"/>


<input type="submit" name="submit" value="Submit"/>
</form>

<script>
function validateForm() {
    var x = document.forms["myForm"]["browse"].value;
    if (x == null || x == "") {
      //do somthing
        return false;
    } else {
      //do somthing
    }
}
</script>