I can't get form states required to work on an ajax submitted form.
Here is some example code. It is taken from the examples module and slightly modified to illustrate the problem.
public function buildForm(array $form, FormStateInterface $form_state) {
$form['container'] = [
'#type' => 'container',
'#attributes' => ['id' => 'box-container'],
];
$form['container']['box'] = [
'#type' => 'markup',
'#markup' => '<h1>Initial markup for box</h1>',
];
$form['changethis'] = [
'#title' => $this->t("Choose something and explain why"),
'#type' => 'select',
'#options' => [
'one' => 'one',
'two' => 'two',
'three' => 'three',
],
];
$form['title'] = [
'#type' => 'textfield',
'#title' => $this->t('Title'),
'#states' => [
'required' => [
':input[name="changethis"]' => ['value' => 'two'],
],
'visible' => [
':input[name="changethis"]' => ['value' => 'two'],
],
],
];
$form['submit'] = [
'#type' => 'submit',
'#ajax' => [
'callback' => '::promptCallback',
'wrapper' => 'box-container',
],
'#value' => $this->t('Submit'),
];
return $form;
}
The title field shows up, when "two" is selected and is marked required. But when the form is submitted with the title field empty, neither HTML5 validation or form validation is complaining about the field being empty. When the "#ajax" part from the submit button is removed, the required state works fine.