LiveValidation .remove not working

Question

I've got a Webform working with the LiveValidation extension. I have a conditional rule that if the user selects United States, then the State-or-province field must be within the list of state abbreviations.

My problem is that if the user selects United States and then goes back and changes their answer the validation rule should be removed so they can entry any old text string. I've quadruple checked my syntax and the function is returning a liveValidation object rather than an error object but the rule is not removed. Any advice would be greatly appreciated.

Here's the script:

            if($('#edit-submitted-state-or-province').length){    
            var field12 = new LiveValidation('edit-submitted-state-or-province', { validMessage: " ", onlyOnBlur: true });
            field12.add( Validate.Presence,  { failureMessage: "Please enter your state or province." }  );
            }
            $('#edit-submitted-country').change(function() {
                var stateList = new Array("","AK"..."WY");
                if($("#edit-submitted-country").val() == "United States"){
                    field12.add( Validate.Inclusion, {within: stateList, failureMessage: "Please enter a valid 2-letter state abbreviation."});
                }
                else{
                    field12.remove( Validate.Inclusion, {within: stateList, failureMessage: "Please enter a valid 2-letter state abbreviation."});
                }
            });

Answer 1

Probably way too late to answer this but here goes...

The documentation for LiveValidation.remove states "you must pass it EXACTLY the same arguments as you used to add the validation". Although the validation function (Validate.Inclusion) is the same, the parameters object is going to be different each time. It doesn't matter that it "looks" the same (that is, the result should you to compare the value of every property between the object you added and the one you removed), it means that it has to be the same object. The only way to ensure this is to move the declaration of the parameters object outside the callback where you are manipulating the validation object, so that it is created only once and not every time the callback is called.

Here's the code (I renamed your ids, BTW). I also made sure that the validation check could only be added once.

$(function() {

var field12,
    added = false,
    stateList = ["", "AK", "CO", "WY"]; // etc
    params = {
        within: stateList,
        failureMessage: "Please enter a valid 2-letter state abbreviation."
    };    

if ($('#state').length) {    
  field12 = new LiveValidation('state', {
      validMessage: " ",
      onlyOnBlur: true
  });

  field12.add(Validate.Presence, {
      failureMessage: "Please enter your state or province."
  });

}

$('#country').change(function() {
  if ($("#country").val() == "United States") {
      if (!added) {
          field12.add(Validate.Inclusion, params);
          added = true;
      }
  }
  else {
      if (added) {
          field12.remove(Validate.Inclusion, params);
          added = false;
      }
  }
});

});