jQuery validation not working onchange

Question

Possible Duplicate: jQuery custom validation method issue

I have a select list that is required. It is validating fine, but doesn't remove the error message when you change the select's value. I don't know why, I've used this same code before and not had this issue.

The HTML:

<table border="0" cellspacing="0" cellpadding="0" class="menu">
    <tr>
        <form action="PHP/Nt6Subscribe.php" method="post" id="SinglePmnt">
            <td width="211">
                <select name="technology" class="select">
                <option value="" selected="selected">&nbsp;Please Select</option>
                <option value="Interactive Brokers">&nbsp;Interactive Brokers</option>
                <option value="MB Trading">&nbsp;MB Trading</option>
                <option value="Patsystems">&nbsp;Patsystems</option>
                <option value="PFG">&nbsp;PFG (Peregrine Financial)</option>
                <option value="TD AMERITRADE">&nbsp;TD AMERITRADE</option>
                <option value="Trading Technologies">&nbsp;Trading Technologies</option>
                <option value="Vision Financial Markets">&nbsp;Vision Financial Markets</option>
                <option value="Hosted">&nbsp;Zen-Fire</option>
                </select>
            </td>

            <td width="189">Single Payment of $995</td>

            <td width="211">
                <input type="hidden" name="item_number" value="34">
                <input type="submit" value="" class="orderNow" />
            </td>
        </form>
    </tr>
</table>

The JavaScript code:

<script type="text/javascript">
    $(document).ready(function() {
        var validator = $("#SinglePmnt").validate({
            rules: {
                    technology: {
                        required: true
                    }
            },
            messages: {
                    technology: {
                            required: "Please select your broker technology"
                    }
            },
            errorElement: "span",
            errorPlacement: function(error, element) {
                error.appendTo(element.parent("td"));
            }
        });
    });
</script>

To sum up it validates when you leave it on "Please Select" which has no value when you hit submit. If you change the value, the error doesn't disappear as it should.

Answer 1

I believe you need an id on the select technology select field

Answer 2

Try forcing validation in the blur event.

$('#singleTech').blur(function(){
  $('#SinglePmnt').validate().element('#singleTech');
});

http://stackoverflow.com/questions/586936/jquery-change-on-select-and-firefox

The live link you posted earlier seems to work in IE, but not FireFox.