Prevent MVC form submit using Javascript Function

Question

I have a upload.ascx in my project. It will be loaded inside Jquery Popup.

The upload.ascx contains File Upload control. The File upload control will uploads .xlsx and .xls files. I have added Java script function to do this validation (To prevent unnecessary files uploaded).

Onchange of FileUpload control and Onclick of Submit button the same Validation function will be called.

The File Upload Validation Function is working for both calling. If the user clicks submit button the same function is getting called and working fine.

My Problem is: In My validation function i have written return false . After displaying the alert Message, the Page is getting redirected to some URL ( localhost/Admin/Authorization/AcceptFile.aspx ). AcceptFile is my ActionResult name. It should not happen. The Function is returning False. But the Form is getting redirected to Above URL why.?

I have kept debugger in my Action Result that is not getting called if its wrong File(Its correct). If its correct File the Index file will be loaded with Success message(Action result is getting called and working Fine). .

I suspect MVC Form. If wrong file is uploaded the redirection is happening with out calling Action Result this should be stopped.

<% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

My Javascript Function:

function checkfile(sender) {
        var validExts = new Array(".xlsx", ".xls");
        var fileExt = sender.value;
        var strValue = false;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            ShowMessage(-1, "Invalid file selected, valid files are .xlsx and .xls types.");
            strValue = false;
        }
        else {
            strValue = true;
        }
        return strValue;
    }

My upload.ascx Code:

<div>
    <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

          <input type="file" id="fileAuthorization" name="fileAuthorization" onchange="checkfile(this);" />

          <input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

    <%} %>
</div>

Answer 1

My Self i found the Problem.

Yes My suspect is correct. The Problem is

onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))"

this should be called Like this in Form tag itself:

 <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))" }))
       {%>

But Earlier it was called Submit button Onclick

<input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

I have corrected and its getting worked(Validations and File Upload For Submit button Onclick and File Upload control onchange).

But My question is why the return false is not working on submit button click? But its working for Fileupload onchange events.

why the redirection was happened.? after changing the same Line to MVC Form its getting worked (redirection is not happening now) why.?

Answer 2

Change your submit to this:

<button type="button" id="btnSave" name="btnSave" onclick="checkfile(document.getElementById('fileAuthorization'))" ></button>

And it won't submit the form automatically

When you're ready to submit the form you can do so with javascript in your callback function:

document.getElementById('form-id').submit();