Anyway to know if an image did NOT display in the browser?

**magicyte** · 02-27-2009, 04:03 AM

Oh. Then do what Nile was saying. Take the source of the image that the user submits or whatever an put it in that "new Image('image here');' declaration. Replace 'image here' with the image name. That's just about it.

**monaya** · 02-27-2009, 04:08 AM

I see. Can you help me configure this. I have a user submitting a full url of an image in a simple form. I want to check that the form exists before allowing the submit? if it doesnt exists I dont want the form to submit.

**Nile** · 02-27-2009, 01:05 PM

Nonono...

Code:

<img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />

**monaya** · 02-27-2009, 02:32 PM

Originally Posted by Nile

Nonono...

Code:

<img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />

By nonono you mean there's no way to validate an image url through a form textfield first before an attempted display on screen?

Maybe I should have a passthrough page and validate the attempted submission on the next page before committing an entry so the image can actually attempt to display first? And then maybe I could disable the submit button on the second page if an onerror is thrown for the image and have them go back to the first form for re-entry.

I'll just do the message to inform the user at least for now.

**monaya** · 02-27-2009, 02:43 PM

Originally Posted by Nile

Nonono...

Code:

<img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />

Also the code above did not work correctly, but this one is perfect:

<script type="text/javascript">
var newImage = new Image();
newImage.src = "image.png";
newImage.onerror = function(){
alert("Your picture doesn't exist.

");
};
</script>

**Nile** · 02-27-2009, 09:48 PM

Try this:

Code:

<script type="text/javascript">
var validateImg = function(form){
   var validate = new Image();
   validate.src = form.elements["imageURL"].value;
   validate.onerror = function(){ alert("Bad Image!"); };
};
</script>
<form onsubmit="validateImg(this); return false;">
<input type="text" name="imageURL" /><input type="submit" value="Validate!" />
</form>

**monaya** · 02-27-2009, 10:31 PM

That's great. But right now its not submitting the form if the image does validate properly.

Also is there a way to limit image widths and heights or is that way complicated?

**monaya** · 02-28-2009, 02:11 PM

I tried using return true;

it still doesnt submit the form if the image validates properly. It just ignores it.

**jscheuer1** · 02-28-2009, 06:00 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function validateImg(form){
   if(validateImg.loaded){
    validateImg.loaded = false;
    return true;
   }
   form.elements.sub.disabled = true;
   if(validateImg.obj[form.elements["imageURL"].value + '_$_attempted']){
    if(!confirm(form.elements["imageURL"].value + ' has been attempted before and failed.\n' +
    'continue anyway?')){
     form.elements["imageURL"].value = '';
     return form.elements.sub.disabled = false;
    }
   else validateImg.obj[form.elements["imageURL"].value] = false;
   }
   if(!validateImg.obj[form.elements["imageURL"].value]){
    validateImg.obj[form.elements["imageURL"].value] = true;
    var validate = new Image();
    validate.onload = function(){
     validateImg.loaded = true;
     validateImg.obj[form.elements["imageURL"].value] = form.elements.sub.disabled = false;
     form.submit();
    };
    validate.onerror = function(){
     alert("Bad Image!");
     form.elements.sub.disabled = validateImg.loaded = false;
     validateImg.obj[form.elements["imageURL"].value + '_$_attempted'] = true;
    };
    validateImg.loaded = false;
    validate.src = form.elements["imageURL"].value;
   }   
   return false;
}
validateImg.obj = [];
</script>
</head>
<body>
<form action="#" onsubmit="return validateImg(this);">
<div>
<input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
</div>
</form>
</body>
</html>

**monaya** · 02-28-2009, 06:20 PM

OK. That's pretty darn nice. I love your special touch about picking up second attempts. I might want to still disallow allowing it go through however. But I guess its a good idea in case the script fails to authenticate properly as well!

Thread: Anyway to know if an image did NOT display in the browser?

Thread Tools

Search Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions