Question

I am trying to validate a form in that if there is no text in an input field, an error icon pops up… and if ANYTHING is in the input a success icon pops up. There are no true validation methods being used. You can see the form here.

As you can see, when you type something in the first field and press tab, the icon pops up correctly, but it will not work on any of the fields after the first. Here is my jquery:

<script type="text/javascript">
        $(function(){
        var field = document.getElementById('myFormField');
        var icon = document.getElementById('myIcon');

        field.onchange = function(){
            icon.src = this.value ? 'success.png' : 'fail.png';
        };
        });
</script>

I dont know how to make this work on all the input fields, but Im sure it is a simple fix. My HTML is set up just like this:

<input type="text" class="name" name="name" tabindex="1" id="myFormField"  /><img id="myIcon" />

the id myFormfield triggers the icon, and the class “name” triggers the background on click. I supposed I should stick with the class and try to use it as a part of this solution. Any Ideas?

Answer 1

You’re not really using the power of jQuery. Try something like this:

$(function(){
    $(':text,:textarea').bind('change, blur',function(){
        $(this).next('img').attr('src',this.value ? 'success.png' : 'fail.png');
    });
});