Search code examples
javascriptjqueryjquery-validatedepends

jQuery Validation Depends and Require from Group


I have rules that validate a group (requires one of 3). That works fine, however, I need to only have the 1 of 3 requirement depend on a selection in the form.

rules: {
  cloudfront_7: {
    require_from_group: {
      depends: function(element) {
        if ($( "#classify" ).val() == "PIC" ){
          return false;
        } else {
          return [1, ".verification-group"];
        }
      }
    }
  },
  cloudfront_8: {
    require_from_group: {
      depends: function(element) {
        if ($( "#classify" ).val() == "PIC" ){
          return false;
        } else {
          return [1, ".verification-group"];
        }
      }
    }
  },
  cloudfront_9: {
    require_from_group: {
      depends: function(element) {
        if ($( "#classify" ).val() == "PIC" ){
          return false;
        } else {
          return [1, ".verification-group"];
        }
      }
    }
  }
}

I noticed that it just returns true instead of the code I wrote, which is necessary for the require_from_group() function.


Solution

  • I solved the problem using these custom rules:

    var verDoc_required = {
      cloudfront_7: {
        require_from_group: [1, ".verification-group"]
      },
      cloudfront_8: {
        require_from_group: [1, ".verification-group"]
      },
      cloudfront_9: {
        require_from_group: [1, ".verification-group"]
      }
    }
    
    $("#classify").change(function() {
      if ( $(this).val() == "PIC" ) {
        removeRules(verDoc_required);
      } else {
        addRules(verDoc_required);
      }
    });
    
    function addRules(rulesObj) {
      for (var item in rulesObj) {
         $('#' + item).rules('add', rulesObj[item]);
      }
    }
    function removeRules(rulesObj) {
      for (var item in rulesObj) {
         $('#' + item ).rules('remove');
      }
    }