Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a required conditional field using Alpaca?

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
}
like image 709
Miguel Camargo Avatar asked Sep 08 '17 20:09

Miguel Camargo


1 Answers

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.

like image 90
Script47 Avatar answered Oct 31 '22 20:10

Script47