带有JQuery表单验证器Rails Gem的表单字段的条件验证

Question

I'm working on a group rails app that uses the jquery-form-validator-rails gem for form field validation. I can perform simple validation using the data object on the field, like so:

<%= f.text_field(:name , class: "form-control", data: { :validation => "required validate_max_length length255", "validation-error-msg" => "Required Field, 255 characters max"}) %>

However, I cannot figure out how to add conditional validation rules. I need a specific field to be required only when another field contains a certain value (ex: #other_component_id is required only when the select field, #component_id, includes 'other' as a value).

I've tried adding rules within the $.validate() call but they do not seem to apply.

$().validate({
      rules: {
        other_component_id: {
          required: function(element) {
            return $('#component_id').val().includes('other');
          }
        }
      }
    });

Applying the validate() method to the specific form does not work either.

Because this app is shared, I have to use the jquery-form-validator-rails gem for form validation.

Answer 1

Never mind. It turns out I was using the incorrect format for applying the validation (although the 'required' validation was working, max length was not). I changed that to instead use this format:

<%= f.text_field(:name , class: "form-control", data: { :validation => 'length', 'validation-length' => '1-255',
                                                                                'validation-error-msg' => 'Required Field, 255 characters max'}) %>

I was then able to add a custom validator and apply that to my field.

JS:

$.formUtils.addValidator({
  name : 'comp_required',
  validatorFunction : function(value, $el, config, language, $form) {
    if ($('#component_id').val().includes('other')) {
      if (value.length > 0 && value.length <= 32) {
        return true;
      }
    } else {
      return true;
    }
  },
  errorMessage : 'You must enter a new component name. Max length = 32',
  errorMessageKey: 'badComponentName'
});

If anyone has suggestions for a more efficient method of conditional validation, I'd be interested to hear them.