CODEWITHSUNDEEP
jqueryvalidation
Dirty Bird Design
Dirty Bird Design

Reputation: 5523

jQuery custom validation method issue

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

Upvotes: 0

Views: 1662

Answers (2)

RememberME
RememberME

Reputation: 2092

Try forcing validation in the blur event.

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

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

jQuery change() on <select> and firefox

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

Upvotes: 0

treeface
treeface

Reputation: 13341

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.

Upvotes: 1

Related Questions