Question

Hi I have a multiple files to upload, I need to validate all these before submitting the form

<form onsubmit="return validate()">
<input type="file" name="File" class="multi" />
<input type="file" name="File" class="multi" />
<input type="file" name="File" class="multi" />
<input type="file" name="File" class="multi" />
<input type="submit" name="BtnSubmit" value="save" />
</form>

And the j query part

function validate()
{
$(".multi").each(function(){
   var files = $(this).val(); 

   if(files=='')
   { 
      alert("No document file selected");
       return false; 
   }

});
}

The problem is its showing the alert but still it submitting the form. How to prevent this.?

Answer 1

The validate function is not returning false, but the .each() function is. So add validation to check if all validation passed in .each() function, otherwise return false

function validate() {
    var count = $(".multi").length;
    var index = 0;
    $(".multi").each(function () {
        var files = $(this).val();

        if (files == '') {
            alert("No document file selected");
            return false;
        }

        index += 1;
    });

    if (index != count) { //If the validation in .each() looping has returned false
        return false;
    }
}