custom rules in jquery

Question

Hi I am bit new to jquery can some one help me with defineing rules in jquery in my case

I have defined three field input boxes for phone number nameing them

areaCode exchange number

<div class="pad10Top"><input name="areaCode" id="mobilePhone1" maxlength="3"/><input name="exchange" id="mobilePhone2" maxlength="3"/><input name="number" id="mobilePhone3" maxlength="4"/><a href="javascript: void(0)"><img name="link" id="linkMobilePhoneBtn" name="link" src="images/theme/btn_clear.gif" class="inlineButton" onclick="$('#mobilePhone1').val('');$('#mobilePhone2').val('');$('#mobilePhone3').val('');"/></a></div>

and I would like to design them such that if you type in number in areacode or in exchange or in number you have to type in the values in the rest for the fields for that I wrote the code like this

rules: {
         areaCode: {
          digits: true,
          minlength: 3
         },
         exchange: {
          digits: true,
          minlength: 3
         },
         number: {
          digits: true,
          minlength: 4
         }
        },

for this I even tried some thing like

rules: {
         areaCode: {
          digits: true,
          minlength: 3,
      required: "#exchange:filled"
         },
         exchange: {
          digits: true,
          minlength: 3,
      required: "#number:filled"
         },
         number: {
          digits: true,
          minlength: 4,
      required: "#areaCode:filled"
         }
        },

but if i try this change this is totally failing my validation iam not sure if this is a syntax problem or if my idea is wrong if some one can help me with this It will be so helpful to carry on with my work thanks

Answer 1

I don't think you can do that with validation. You can however register an event listener for the blur event on the fields an do your switch there.