How to limit the display of a field on the front end, based on a Form API state Following on from a previous question. 

I have a slideshow field, an image field and a video field, but I only want editors to choose one of these.

Using Form API states I have created a form_alter in a custom module which reveals one input field at a time based based on a choice from a select list. This is working fine. Code below.

    &lt;?php

    /**
     * Implements hook_form_alter().
     */
    function mymodule_form_alter(&amp;$form, \Drupal\Core\Form\FormStateInterface &amp;$form_state, $form_id) {
      $form['field_slideshow_image']['#states'] = [
        'visible' =&gt; [
          'select[name="field_selection_display"]' =&gt; ['value' =&gt; 'slideshow']
        ]
      ];
      $form['field_image']['#states'] = [
        'visible' =&gt; [
          'select[name="field_selection_display"]' =&gt; ['value' =&gt; 'image']
        ]
      ];
      $form['field_video_embed']['#states'] = [
        'visible' =&gt; [
          'select[name="field_selection_display"]' =&gt; ['value' =&gt; 'videoembed']
        ]
      ];
    }


This method makes for a good UI, but it does not prevent more than one field being populated. Therefore I need to extend the module to;

1). Prevent an editor populating more than one field, perhaps by displaying an inline error message.
OR
2). Limit the display on the front end, to the field which has a visible state (based on the selection list choice).

My feeling is that number 2 would make for the best UX, but it would be good to try both.

How would I go about this?
For option #1 you would have to create a custom validation. 

For option #2 which is the better solution you would have to load the fields via AJAX.