How to create a required conditional field using Alpaca?

1.3k views Asked by At

Does anyone know how I can define a required field which is dependant on another field?

For example if field1 is marked true then field2 must be required, otherwise field 2 should not be filled.

Here is my current attempt:

"field1": {
    "title": "Field1:",
    "type": "string",
    "enum": ["true", "false"]
},
"field2": {
    "title": "Field2:",
    "type": "integer",
    "dependencies": "field1",
    "required": true
}
1

There are 1 answers

0
Script47 On BEST ANSWER

Alpaca's dependency system hides the dependant field if the dependency is not met, otherwise the field is shown and any options assigned to it such as validation options are also required.

After looking through the documentation I noticed that you have to set the dependencies in both the schema and the options objects.

JSON

{
  "view": "bootstrap-edit",
  "schema": {
    "type": "object",
    "properties": {
      "description_required": {
        "enum": [
          "Y",
          "N"
        ],
        "required": true
      },
      "description": {
        "required": true
      }
    },
    "dependencies": {
      "description": ["description_required"] // Specify the field that your conditional field is dependant on
    }
  },
  "options": {
    "fields": {
      "description_required": {
        "type": "select",
        "noneLabel": "Select an Option",
        "label": "Description Required"
      },
      "description": {
        "type": "textarea",
        "cols": 5,
        "label": "Description",
        "dependencies": {
          "description_required": "Y" // Specify the required value for the dependant field to show
        }
      }
    }
  }
}

In the above example, we have a simple select with the options of Y and N. If Y is selected then we show a required textarea, otherwise the textarea is not displayed.

Live Example

JSFiddle - Take note of the comments in the form object.