jQuery validation - multiple groups

Question

Im designing a user control that has the following:

• a textbox called 'AddressInput'
• a google maps plugin
• a linkbutton
• a textbox for the marker title called 'MarkerTitleInput'
• a "Submit" button

The problem is this:

When the linkbutton is clicked, I need to validate that AddressInput was completed, but nothing else

When the submit button is clicked, I need to validate that AddressInput and MarkerTitleInput were both completed.

So my first two problems are: 1) How do i validate certain fields from a linkbutton, without submitting the form 2) How do i validate all fields from the form being submitted

My other problem is that when the linkbutton is clicked, my code runs a lookup against Google's Geocode to get an address. I was going to create an additional validation method to handle when an address is not found, but using a validator means the json request is sent everytime a key is pressed, which is too much - i only want the validation to run when the linkbutton is clicked. I have tried (selector).validate({ onkeyup:false }) with no avail. Is it perhaps possible to manually set whether the .valid() method thinks the form is valid?

Thanks Al

Answer 1

$("form").validate({

      groups:{

          pg1:"_Phone1 _Phone2 _Phone3",

          pg2:"dob_month dob_day dob_year"

      },

      errorPlacement:function(error, element){

      if(element.attr("name")=="_Phone1"|| element.attr("name")=="_Phone2" || element.attr("name")=="_Phone3"){

        error.insertAfter("#_Phone3")
      }

      else if
        (element.attr("name")=="dob_month"|| element.attr("name")=="dob_day" || element.attr("name")=="dob_year"){

        error.insertAfter("#dob_year")
      }

      else

        error.insertAfter(element);

      },

      });

});

Answer 2

Give each of the two buttons a unique class (for ease of targeting in jQuery).

Give each class an OnClick event.

Validate in the OnClick event.

If the validation succeeds, return true.

Else return false.