easy way to show image next to textbox?

Question

Hi, I trying to validate a form using ajax...I have got it to show either a cross or tick if the box passes valdation. This is done by showing or hiding a div tag, is there an easier way without me having to have a div tag for each cross & tick as this would use about 20 div tags.

Thanks

Answer 1

You could use the CSS :before property to do this:

.tick:before {
    content:url(tick.gif);
}

.cross:before {
    content:url(cross.gif);
}

(you'll probably have to tweak the CSS a bit to get the image to display in the proper position)

Then in your javascript, just add the class tick or cross to each text box that you want to display an image next to.

Answer 2

Since your validation depends on javascript you could leave the divs out of the html initially and insert them after validating a field. Let's say your source is something like:

<p><input id="email" name="email" type="text" value="" /></p>

Your script could be something like:

var emailField = document.getElementById('email');
if( isValid(emailField) ){
var tick = document.createElement('DIV');
tick.className = 'tick';
emailField.parentNode.appendChild(tick);
}else{
var cross= document.createElement('DIV');
cross.className = 'cross';
emailField.parentNode.appendChild(cross);
}

You add the classes '.tick' and '.cross' to your css and apply background images. Of course, you need some checking if the element was already inserted by a previous validation. This is just a simple example.

This way you don't need the extra divs initially.