如何同时验证多个输入字段

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

Answer 1

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

Answer 2

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
}

Answer 3

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

Answer 4

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>