jQuery custom validation method issue

Question

I have a select list that's default value (for Please Select) is 0. this is due to the payment processing system and beyond my control. I have an add.Method that states if the select's value is "0" return false, otherwise return true. It works ok, except that when you change the select's value to something else after submitting and getting error, the error msg is still displayed. How do I fix this

the HTML:

<form action="" method="post" id="SinglePmnt">
    <td>
     <select name="technology" class="select" id="singleTech">
      <option value="0" 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>Single Payment of $995</td>
    <td>
      <input type="hidden" name="item_number" value="34">
      <input type="submit" value="" class="orderNow" />
    </td>
</form>

the validation rule using jquery.validate.js

$(document).ready(function() {
        $.validator.addMethod(
            "SelectTechnology",
            function(value, element) {
                if ($("#singleTech").val() === '0'){
                    return false;
                } else return true;
            },
            "Please Select a Technology"
        );
        var validator = $("#SinglePmnt").validate({
            rules: {
                    technology: {
                        SelectTechnology: true
                    }
            },
            errorElement: "span",
            errorPlacement: function(error, element) {
                error.appendTo(element.parent("td"));
            }
        });
    });

Can't see the error in this, I appreciate any help. thanks

Answer 1

When you're using jsfiddle (with the slightly unorthodox way in which it adds elements to the iframe), you need to include your JS directly in the HTML section below where you reference your plugin. I seem to have got it working using only your code:

http://jsfiddle.net/Yjt98/1/

This is what you want it to do, correct? It appears to be validating the fields with the onchange event. Lemme know if you're expecting different behavior.

Answer 2

Try forcing validation in the blur event.

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

$('#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.