JS: Custom JS validation not working in Internet Explorer

Question

I'm facing an issue with form validation in Internet Explorer.

In the following script, I have created a form in HTML, and wrote JavaScript logic to perform form validations before submitting the form.

The script validates the form properly and gives the alerts only in Chrome and Firefox BUT NOT in Internet Explorer, and I wonder why?:

http://jsfiddle.net/PKLQn/121/

var error="";

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();
    //var mime = fup.type;
    //if (mime=='image/png' || mime=='image/jpeg' || mime=='image/gif') {
    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") { 
        return true;
    } else { return false; }
} // Checkfiles

function Checksize() { 
    var iSize;
    if ($("#flUpload")[0].files[0]){
        iSize = ($("#flUpload")[0].files[0].size / 1024);
    }
    if(Checkfiles()==true) {
        if (iSize < 51200.00) { 
            return true;
        }
        else{
            return false;
        }
    } else { error += "- Upload GIF, PNG, JPG images only, smaller than 50 KB."; return false; }
} //Checksize

function Checkfields() {
    // Validate Email
    var email = $("#email").val();
    if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else { error += "- Please enter a valid email address (eg. http://youwebsite.com)\n"; }
    // Validate Title
    var title = $("#title").val();
    if (title=="" || title==null) { error += "- Please enter a valid title for your advertisement (Max. 60 chars.)\n"; }    
    // Validate URL
    var url = $("#url").val();
    if (/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/.test(url)) { } else { error += "- Please enter a valid URL.\n"; }
}// Checkfields

function newfuncion() {
        var fields = Checkfields();
        var size = Checksize();
        var files = Checkfiles();
        if(fields==true && size==true && files==true) {
            return true;
        } else {
            if(error!=""){alert(error); error=""; return false;} else {return true;}
            return false;
        }
} //Juntar todas las funciones

input[type="text"] {
  display: inline-block;
  padding: 3px 8px;
  margin: 5px 0px 5px 10px;
}
label {
  font-weight: bold;
  cursor: pointer;
}
.submit-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 8px 15px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="fff1" onsubmit="return newfuncion();">
    <label for="email">Email: </label> <input type="text" placeholder="Email" id="email" /><br/>
    <label for="title">Title: </label> <input type="text" placeholder="Title" id="title" /><br/>
    <label for="url">URL: </label> <input type="text" placeholder="URL" id="url" /><br><br>
    <input type="file" id="flUpload" /><br/><br>
    <input type="submit" class="submit-btn" value="CONTINUE" />
</form>

I wonder why my code is not working on Internet Explorer 8, 9?

I honestly don't know how to check that, I tested on Internet Explorer 8 and after a few hours I got desperated, so I decided to drop support for IE8 and updated to Internet Explorer 9.. But has the same problem :( — Eduardo Go
– Eduardo Go, Commented Apr 28, 2013 at 21:33
In IE9 press F12 to bring up the dev tools (including the console). then try your function again and see if any errors are displayed. — nnnnnn
– nnnnnn, Commented Apr 28, 2013 at 21:34
not concerning this particular problem, but http://youwebsite.com, as suggested by your error message, is not an email address. — MarioP
– MarioP, Commented Apr 28, 2013 at 21:44
The error message is "Unable to get property '0' of undefined or null reference", btw, and the problem is the $("#flUpload")[0].files[0]. There is no ".files". — diego nunes
– diego nunes, Commented Apr 28, 2013 at 21:56

Conspicuous Compiler · Accepted Answer · 2019-05-01 20:20:47Z

2

IE 8/9 doesn't support "multifile" uploads, so the .files property of the <input type="file"> returns null. You try to access its first index, as if it returned an array, giving the error "Unable to get property '0' of undefined or null reference. It's also worth noticing that the .size property was not available before HTML5 and your code should check for that too. You can't check the file size only with JavaScript in older browsers.

Since you are not using multifile upload (at least not per your example code), you can check the presence of a file to be uploaded with input.value. Try changing the .files[0] to .value and changing the logic of the file size check and that should fix your problem in all browsers.

edited May 1, 2019 at 20:20

Conspicuous Compiler

6,4901 gold badge44 silver badges53 bronze badges

answered Apr 28, 2013 at 21:58

diego nunes

2,8361 gold badge16 silver badges16 bronze badges

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

4 Comments

Eduardo Go Over a year ago

User will only upload one single file, not multiple. Or how can I modify that line in order to still getting that file size

diego nunes Over a year ago

Sadly you can't get file size in older browsers. You can always check it on the server-side after the user has posted the form. If checking the file size before uploading is a real requirement you can try using some Flash Uploader.

Eduardo Go Over a year ago

Thanks man, a quick question. Do you know how can I target that function Checksize() only to work with all browsers except for IE ?

diego nunes Over a year ago

This is called "browser spoofing" and is not a recommended practice, although easily achievable (since you're using jQuery, check the $.browser object). You can, however, check if the browser (whatever it is) supports the features you need (it's called "feature detection"). For this .size thing, you can do something like if ($("#flUpload")[0].files) { /* check size */ } else { /* non-HTML5 browser */ } This may be overkill for your current issue, but you should check the Modernizr library for feature detection.

Collectives™ on Stack Overflow

JS: Custom JS validation not working in Internet Explorer

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related