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
– AConsumer, Commented Jan 17, 2019 at 11:34
You can use: - splitName=fName.split("."); fileType=splitName.pop().toLowerCase(); — AConsumer
– AConsumer, Commented Jan 17, 2019 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
– noobed, Commented Jan 17, 2019 at 11:40
var splitName=fName.split("."); var fileType=splitName.pop(); if(typeof fileType==="string"){ fileType.toLocaleLowerCase(); } — AConsumer
– AConsumer, Commented Jan 17, 2019 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. — user2399035
– user2399035, Commented Jan 17, 2019 at 11:44

Ankur Shah · Accepted Answer · 2019-01-17 11:44:49Z

2

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

answered Jan 17, 2019 at 11:44

Ankur Shah

4306 silver badges16 bronze badges

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

1 Comment

AConsumer Over a year ago

@Nice Ankur Shah

user2399035 · Accepted Answer · 2019-01-17 11:48:14Z

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

Dhananjay Yadav · Accepted Answer · 2019-01-17 12:57:42Z

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>

Seniru Pasan · Accepted Answer · 2019-01-26 08:54:19Z

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, 2019 at 8:54

answered Jan 17, 2019 at 11:45

Seniru Pasan

7951 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

How do I validate multiple input fields at the same time

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related