C3 AI Documentation Home

Validate required and optional fields

The simplest form of validation in the C3 AI UI framework uses the required flag on an input component. This method prevents users from submitting a form until they complete all fields using containing the required flag. Additional constraints like numeric ranges and date limits can also be applied using built-in properties. These validations execute automatically on the client side and require no custom logic.

Fields that control validation

  • required: Ensures the field must contain a value before submission.
  • fieldName: Maps the input to a corresponding property in the data model.
  • inputElement: Declares the component type, such as UiSdlTextInput, UiSdlNumberInput, or UiSdlDateTimeInput.

Validation settings in the JSON

This form contains three input fields requiring validation:

  • A required text input labeled Location.
  • A numeric input labeled Count with defined min, max, and step values.
  • A date input labeled Manufactured Date constrained by a start and end date range.
JSON
/* examplePackage/ui/c3/meta/examplePackage.SimpleFormValidation.json */

{
  "type": "UiSdlConnected<UiSdlForm>",
  "component": {
    "title": { "title": "Required Field Validation" },
    "subtitle": { "title": "Ensures mandatory fields are filled in" },
    "width": 20,
    "dataSpec": {
      "fieldSets": {
        "type": "[UiSdlFormFieldSet]",
        "value": [
          {
            "type": "UiSdlFormFieldSet",
            "fields": [
              {
                "inputElement": {
                  "type": "UiSdlTextInput",  // Basic text input
                  "placeholder": "Enter a location"
                },
                "fieldName": "location",      // Connects to the ‘location’ property in the model
                "label": "Location",
                "required": true              // User must provide a value
              },
              {
                "inputElement": {
                  "type": "UiSdlNumberInput", // Numeric input with min/max
                  "min": 10,                  // Minimum allowed value
                  "max": 50,                  // Maximum allowed value
                  "step": 2,                  // Increments in steps of 2
                  "fluid": false
                },
                "fieldName": "count",         // Connects to ‘count’ property in the model
                "label": "Count",
                "required": true              // Field is required
              },
              {
                "inputElement": {
                  "type": "UiSdlDateTimeInput",   // Date input component
                  "placeholder": "Manufactured Date",
                  "allowKeyboardEdit": true,      // Allows typing in the field
                  "showTimePicker": false,        // Hides time selector
                  "dataSpec": {
                    "range": {
                      "rangeStart": "2025-01-01", // Earliest selectable date
                      "rangeEnd": "2025-12-31"    // Latest selectable date
                    }
                  }
                },
                "fieldName": "manufacturerDate",  // Connects to ‘manufacturerDate’ property
                "required": true,
                "label": "Manufactured Date"
              }
            ]
          }
        ]
      }
    }
  }
}

Built-in validation support by component

Many UiSdlForm input components include built-in fields that support native validation. These options allow you to define field-level constraints such as required values, valid ranges, or acceptable input patterns—directly in the component JSON configuration. The table below lists the most common components and their associated validation-related fields.

Check the Type definition for the specific components you want to display on your form, but all components have a required field, allowing you to implement out of the box validations, ensuring the end-user fills in mandatory fields.

Was this page helpful?