Conditional validation with jquery

Question

Ok this is driving me crazy. I have a user account page. Where you have the option to change your password. I want a conditional jquery validation that if the user types in a new password in the new password box the box that confirms the password as well as the box that asks for the old password is turned into a required element. here is my ragtag code so far:

$("#aspnetForm").validate({
    rules: {
      <%=CurrentPass.UniqueID %>: {
          required: <%=NewPass1.UniqueID %>:specified}
      <%=NewPass2.UniqueID %>: {
          required: <%=NewPass1.UniqueID %>:specified}
    }, messages:{}
});

Just to clear something up. I am using :specified because if the filed is filled. Maybe some other condition?

Answer 1

Those selectors need to be strings using :filled (unless :specified is a custom selector you made) and found by ID instead of name, like this:

$("#aspnetForm").validate({
   rules: {
    <%=CurrentPass.UniqueID %>:{
     required: "#<%=NewPass1.ClientID %>:filled"}
    <%=NewPass2.UniqueID %>:{
     required: "#<%=NewPass1.ClientID %>:filled"}
    }, messages:{}    
   });
});

Answer 2

I think you want to use equalTo for the confirmation password, with the current password required if the new password has data in it.

$('form').validate({
     rules: {
         <%= CurrentPass.UniqueID %>: {
                required: '#<%= NewPass1.ClientID %>:filled'
              },
         <%= NewPass2.UniqueID %>: {
                equalTo: '#<%= NewPass1.ClientID %>'
              }
     }
});