Question 193386 in Html Question posted in
Some basic documentation can be found here.

Html – Input changing between true and false everytime is blurred

So I’m Trying to do a image validator with Javascript on a input[type="file"]. But with others validations it works perfectly. Everytime I blur the input when the value is valid, it returns false and true over and over. My goal is to have a good Input validation.

//Image Validator
const ImageExp = new RegExp(/.*.(jpe?g|png|)$/igm)

function ValidaImagem(x) {
  if (ImageExp.test(x.value) == true) {
    console.log(true);
    x.style.background = "#0F0";
    return true;
  } else {
    console.log(false);
    x.style.background = "#F00";
    return false;
  }
}
document.getElementById("Photo").addEventListener("blur", function() {
  ValidaImagem(document.getElementById("Photo"))
})
document.getElementById("Submit-btn").addEventListener("click", function() {
  ValidaImagem(document.getElementById("Photo"))
})
<input type="file" accept="image/*" id="Photo" name="" class="form-control" />
<button id="Submit-btn">Submit</button>
Tags:

2

Answers


  1. 0

    Your image validation function tests the value property of the file input. However, the value of an input-type file will give you the file name but not the contents or the file type. Therefore, your regular expression is tested against the filename, not the file type. This might work if you always trust users to label their file types correctly, but it’s not foolproof and won’t validate the file’s actual content. You can fix this by changing your Regex to match the MIME type of the file like so,

    const ImageExp = new RegExp(/image/(jpe?g|png)/i)

    Using this method, you can match and test against the file.type value by first capturing the contents of the submission. Which changes your validation program to this:

    function ValidaImagem(inputElement) {
   let file = inputElement.files[0]; 

   if (file && ImageExp.test(file.type)) {
      console.log(true);
      inputElement.style.background = "#0F0";
      return true;
   } else {
      console.log(false);
      inputElement.style.background = "#F00";
      return false;
   }
}

    Everything else in your HTML and CSS you can keep the same.

    You can learn more about MIME types here:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

    Notice this specific section:
    "Warning: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files, sites will not work correctly, and downloaded files may be mishandled"

    Login or Signup to reply.
  2. 0

    If the goal is only to submit the form if an image is selected it should be enough to set the accept attribute as you already did and the required attribute.

    document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('We have an image!');
});
    input:valid {
  background-color: orange;
}
    <form name="form01">
  <input type="file" accept="image/*" name="photo" required />
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search