CODEWITHSUNDEEP
javascripthtml
Helen Lee
Helen Lee

Reputation: 39

How do I validate multiple input fields at the same time

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

Upvotes: 0

Views: 1112

Answers (4)

Seniru Pasan
Seniru Pasan

Reputation: 801

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
}

Upvotes: 0

Dhananjay Yadav
Dhananjay Yadav

Reputation: 273

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>

Upvotes: 0

Lelio Faieta
Lelio Faieta

Reputation: 6663

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

Upvotes: 0

Ankur Shah
Ankur Shah

Reputation: 430

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

Upvotes: 2

Related Questions