1

Hi I need to validate a file input type :

<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>

j query method I have created is

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

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

Problem is its showing the alert but the form is submitting.

1
  • I can not reproduce: jsfiddle Commented Feb 11, 2013 at 14:49

3 Answers 3

1

Kindly see code snippet below for validating if file submitted is a valid file type. As well as checking if a file was submitted to start with.

//Javascript

$("#btnUpload").click(function (e) {

        var file = $("#fileupload").val();  //Fetch the filename of the submitted file

        if (file == '') {    //Check if a file was selected
            //Place warning text below the upload control
            $(".errorDiv").html("Please select a file first.");
            e.preventDefault();
        }
        else {
            //Check file extension
            var ext = file.split('.').pop().toLowerCase();   //Check file extension if valid or expected
            if ($.inArray(ext, ['txt']) == -1) {
                $(".errorDiv").html("Select valid text file (txt).");
                e.preventDefault(); //Prevent submission of form
            }
            else {
        //Do your logic here, file upload, stream. etc.. if file was successfully validated
        }
    }
});

//For the HTML

<input id="fileupload"     type="file" name="files[]" /><br />
                    <p class="reminder"> Allowed file type: .txt</p>
                    <div class="errorDiv"></div>
                    <input type="button" id="btnUpload" value="Upload File"/><br />

Heads up: Perform file validation on the server side as well to prevent back-end error or data injections.

I hope this helps!

Sign up to request clarification or add additional context in comments.

Comments

1
function validate(){
  $(".multi").each(function(){
   var files = $(this).val(); 
   if(files==''){ 
     alert("No document file selected"); 
   }
   return false;       
 });
}

your return statement should be in different block not same if block so it will work as else

Comments

0

The problem is, you are returning false for each loop. If you return false inside $.each() loop it means to exit $.each loop. So here the alert appears and it then simply exits the each.

You can achieve that task in many ways. But the simplest way is to bring a flag variable.

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

        if(files=='') { 
           alert("No document file selected");
           $check = false;
           return false; // You don't want to loop, so exit each loop
        }
    });

    return $check;
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.