Radio/checkbox error prompt is displayed at every option

[PhilippGrashoff]

When using return $from->error() with a radio field, the error message is displayed on every radio option:

	$bulk_form->addField('weekday', ['Radio'], ['values'=> STD_GERMAN_WEEKDAYS, 'caption' => 'Wöchentlich am']);
	
	$bulk_form->onSubmit(function() use($wizard, $bulk_form) {
		//no value selected? error
		if(!$bulk_form->model->get('weekday')) {
			return $bulk_form->error('weekday', 'Bitte wähle einen Wochentag aus');
		}	

The false positioning of the error messages may well be due to some of my CSS changes, but IMHO displaying the error message on every single radio item seems wrong.

Proposal: Make all radio items red, display the error message on first one only

checkboxes are also affected - see #1826

[ibelar]

This is not really related to atk4 but more on semantic-ui.

The only way to remove label for each individual radio button is to use the form setting inline set to false.

You could override Form class and render it like:

$this->js(true)
            ->api(['url' => $cb->getJSURL(),  'method' => 'POST', 'serializeForm' => true])
            ->form(['inline' => false, 'on' => 'blur']);

Now using

return $bulk_form->error('weekday', 'Bitte wähle einen Wochentag aus');

Will display all radio in red with no label.
However, this will also remove label for all fields in form.

If you would still like to send error message to user you can add an error view inside your form:

$error = $f->add('View')->addClass('ui error message');

and display your error message at ounce using:

$bulk_form->onSubmit(function() use($wizard, $bulk_form) {
    // on error 
   return $bulk_form->js()->form('add errors', ['error_1', error_2']);
}

Hope this help.

[PhilippGrashoff]

Hi Alain,

thx for the explanation. So I will add this to the Semantic UI issues as this will be the correct place then.

[romaninsh]

if you do - reference this ticket here..

[mvorisek]

It seems there is no SUI/FUI issue, the closest (but different) issues I found is fomantic/Fomantic-UI#1387.