How do I validate multiple input fields at the same time

Question

I'm trying to validate file type so only JPGs or PNGs can be submitted in my form. I've set it so onChange of the image upload field an alert pops up and the 'upload' button is hidden. However I have 5 fields and if I choose a correct filetype in another box the button is then shown even if the wrong filetype is still selected in another field. How can I clear the input field at the same time as triggering the alert if the filetype is wrong?

I've tried this.value = ""; between changing the class and the alert but I'm not sure of the correct syntax to clear the current box

    function validate(fName){

        splitName = fName.split(".");
        fileType = splitName[1];
        fileType = fileType.toLowerCase();
        if (fileType != 'jpg' &&  fileType != 'jpeg' && fileType != 'png'){
          document.getElementById("uploadbutton").className = "hide";
          alert("You must select a .jpg or .png, file.");
        }
        else {
          document.getElementById("uploadbutton").className = "fwdbutton upload";
       }
    }

    <div id="upload">
    <h2>If possible, please could you include photographs of the following:</h2>

    <p><label for='uploaded_file1'>Current boiler:</label> <input type="file" name="uploaded_file1" id="uploaded_file1" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear1">X</a></p>

    <p><label for='uploaded_file2'>Gas meter:</label> <input type="file" name="uploaded_file2" id="uploaded_file2" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear2">X</a></p>

    <p><label for='uploaded_file3'>Boiler pipe work:</label> <input type="file" name="uploaded_file3" id="uploaded_file3" class="uploadfields" accept="image/png, image/jpg, image/jpeg"onChange="validate(this.value)"><a href="#" class="clearfile" id="clear3">X</a></p>

    <p><label for='uploaded_file4'>Outside flue:</label> <input type="file" name="uploaded_file4" id="uploaded_file4" class="uploadfields" accept="image/png, image/jpg, image/jpeg"onChange="validate(this.value)"><a href="#" class="clearfile" id="clear4">X</a></p>

    <p><label for='uploaded_file5'>Anything else relevant:</label> <input type="file" name="uploaded_file5" id="uploaded_file5" class="uploadfields" accept="image/png, image/jpg, image/jpeg" onChange="validate(this.value)"><a href="#" class="clearfile" id="clear5">X</a></p><br />

    <input class="backbutton showmoved" type="button" value="<< back" /> <input class="fwdbutton upload" id="uploadbutton" type="button" value="upload >>" />

    <p><a class="nophotos" id="nophotos">I have no photos &gt;&gt;</a></p>

    </div>

Many thanks for any advice, Helen

Your logic is seems liitle incorrect, what if file name is helen.selen.melon.jpg? — AConsumer, Jan 17 '19 at 11:34
You can use: - splitName=fName.split("."); fileType=splitName.pop().toLowerCase(); — AConsumer, Jan 17 '19 at 11:36
@ShivendraGupta you should also include a check in your example, because one can easily run into "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" — noobed, Jan 17 '19 at 11:40
var splitName=fName.split("."); var fileType=splitName.pop(); if(typeof fileType==="string"){ fileType.toLocaleLowerCase(); } — AConsumer, Jan 17 '19 at 11:44
you should mantain a counter (global variable, not inside the function). this is 0 and it is +1 each time you have an error in validation. — Lelio Faieta, Jan 17 '19 at 11:44

score 2 · Accepted Answer · answered Jan 17 '19 at 11:44

Please try this.

    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
    function ValidateSingleInput(oInput) {
      if (oInput.type == "file") {
       var sFileName = oInput.value;
       if (sFileName.length > 0) {
        var blnValid = false;
        for (var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                blnValid = true;
                break;
            }
        }
         
        if (!blnValid) {
            alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            oInput.value = "";
            return false;
        }
    }
}
return true;
}

   File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
   File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
   File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

Seniru Pasan · Answer 2 · 2019-01-26T08:54:19.847

0

You can use the following regular expression to check whether the file valid.

/\.(jpe*g|png)$/gi

And then you can use the test() method to check if the file is valid in your if statement.

if(/\.(jpe?g|png)$/gi.test(s)) {
  //TODO
}

edited Jan 26 '19 at 08:54

answered Jan 17 '19 at 11:45

Seniru Pasan

753
1
7
13

score 0 · Answer 3 · answered Jan 17 '19 at 11:48

use a counter to see if you have more errors:

var counter= 0;
function validate(fName){

    splitName = fName.split(".");
    fileType = splitName[1];
    fileType = fileType.toLowerCase();
    if (fileType != 'jpg' &&  fileType != 'jpeg' && fileType != 'png'){
      alert("You must select a .jpg or .png, file.");
      counter = counter + 1;
    }
    if (counter !=0){
        document.getElementById("uploadbutton").className = "hide";
    }else{
        document.getElementById("uploadbutton").className = "fwdbutton upload";
    }
}

each time you run the function it will check if you have an error. This code otherwise is an example and doesn't handle if you fix a previously marked error.

My advice is to redesign the code to check each input once on button click and trigger the alert of the submission. Instead of doing so that is overcomplicating things. So leave the button always visible and run the function on uploadButton click

score 0 · Answer 4 · answered Jan 17 '19 at 12:57

Hope this will help you. Initially Upload button is hidden when all the valid files are selected you will see upload button and any invalid type will give you alert.

 var isValid = [0];
    var sumTotal=0;
    function validate(fileNo){
        var files = event.target.files;
        var filetype = files[0].type;
        if (filetype == 'image/jpeg' ||  filetype == 'image/jpeg' || filetype == 'image/png'){
            isValid[fileNo]=1;
        }else{
            alert("You must select a .jpg or .png, file.");
            isValid[fileNo]=0;
        }
        sumTotal = isValid.reduce(function(a, b) { return a + b; }, 0);
        if(sumTotal==5){
            document.getElementById("uploadbutton").style.display="block";
        }else{
            document.getElementById("uploadbutton").style.display="none";
        }
    }

<div id="upload">
    <h2>If possible, please could you include photographs of the following:</h2>

    <p><label for='uploaded_file1'>Current boiler:</label> <input type="file" name="uploaded_file1" id="uploaded_file1" class="uploadfields"  onChange="validate(1)"><a href="#" class="clearfile" id="clear1">X</a></p>

    <p><label for='uploaded_file2'>Gas meter:</label> <input type="file" name="uploaded_file2" id="uploaded_file2" class="uploadfields"  onChange="validate(2)"><a href="#" class="clearfile" id="clear2">X</a></p>

    <p><label for='uploaded_file3'>Boiler pipe work:</label> <input type="file" name="uploaded_file3" id="uploaded_file3" class="uploadfields"  onChange="validate(3)"><a href="#" class="clearfile" id="clear3">X</a></p>

    <p><label for='uploaded_file4'>Outside flue:</label> <input type="file" name="uploaded_file4" id="uploaded_file4" class="uploadfields"  onChange="validate(4)"><a href="#" class="clearfile" id="clear4">X</a></p>

    <p><label for='uploaded_file5'>Anything else relevant:</label> <input type="file" name="uploaded_file5" id="uploaded_file5" class="uploadfields"  onChange="validate(5)"><a href="#" class="clearfile" id="clear5">X</a></p><br />

    <input class="backbutton showmoved" type="button" value="<< back" /> <input class="fwdbutton upload" style="display: none;" id="uploadbutton" type="button" value="upload >>" />

    <p><a class="nophotos" id="nophotos">I have no photos &gt;&gt;</a></p>
</div>

How do I validate multiple input fields at the same time

4 Answers4