change in dropdown list value not picked up in jquery validation -

i'm trying build validation web app , having small issue. have asp dropdown list , textbox , want make textbox mandatory if selects 'other' dropdown list. validation works when select other if decide select option , click save button, still asks me enter value in text box though selected value of dropdown not other.

here jquery function:

$(function() {      $("#btnmainsave").click(function() {          val = $('#ddlrefto').val();         alert(val);         $("#form1").validate({              rules: {                  txbreftoother: val == "other" ? "required" : "notrequired",                 txbrefconcern: "required"              },             messages: {                 txbrefconcern: "*this field mandatory",                 txbreftoother: "*this field mandatory"              },              ignore: ""         });     }); }); 

the alert shows change in value being picked reason, validation part still insists put value in textbox though val=something different 'other'.

any appreciated.

update

i've played around custom validation , still having issues. here custom validation method:

$.validator.addmethod("test", function(value, element) {          var val = $('#ddlrefto').val();          if (value.length==0 && val=="other") {              //invalid             return false;         }         // valid         else return true;     },              "*this field required."); 

and i'm referring this:

$("#form1").validate({         rules: {             txbreftoother: {                 required: true,                 test: true              }         }     }); 

however submit, validation error triggered no matter selected in dropdown , stops when enter in textbox.

however, if set validation on dropdown instead of textbox follows:

$.validator.addmethod("test", function(value, element) {    if (value=="other" && $('#txbreftoother').val()=="") {                //invalid                return false;             }            // valid           else return true;              },              "*this field required.");  $("#form1").validate({           rules: {                 ddlrefto:{                             required: true,                            test: true                          }                     }         }); 

it works way want error message appears dropdown list instead! why doesnt first version work? heres html if helps:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  <script  type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script> <script type="text/javascript" src="http://jquery.bassistance.de/validate/additional-methods.js"></script> ...... ...... <table width="530"> <tr> <td class="label" width="80">referring to</td> <td width="120"><asp:dropdownlist id="ddlrefto" runat="server" cssclass="textbox" font-size="9pt" width="110">         <asp:listitem text="test1" value="test1"></asp:listitem>         <asp:listitem text="test2" value="test2"></asp:listitem>         <asp:listitem text="test3" value="test3"></asp:listitem>         <asp:listitem text="other" value="other"></asp:listitem> </asp:dropdownlist>  </td> <td class="label" align="right" width="170">if 'other', please specify</td> <td><asp:textbox id="txbreftoother" runat="server" cssclass="textbox" width="150"></asp:textbox></td> </tr> </table> <asp:button id="submit" runat="server" text="click" /> 

try setting message required validation only:

messages:{     txtreftoother:{         required: "*this field mandatory"     } 

also, notrequired? make sure have defined custom method.

---

based on comments, think best bet add custom method handle validation. here's custom method:

 jquery.validator.addmethod("conditionallyrequired", function (value, element, params) {     if ($("'#" + params + "'").val() == "other") && value == ''{          return false; //invalid     }     return true; // valid }, "*this field required." //validation message       );  // connect css class  jquery.validator.addclassrules({     conditionallyrequired: { conditionallyrequired: true } }); 

this method check if ddlrefto 'other' , if textbox blank. if yes, return false - invalid. apply method textbox:

txtreftoother: {     conditionallyrequired: ddlrefto }