[SOLVED] How to display form errors under inputs?

[PWaddict]

By default on the form markup the errors are displayed under labels. Is it possible to display them under inputs without involving JavaScript?

[dragan]

@PWaddict Did you mean to post this question in the FormBuilder (pro) forum?

Otherwise you'd have to clarify what "by default" means (some kind of frontend-framework?).

[PWaddict]

3 minutes ago, dragan said:

@PWaddict Did you mean to post this question in the FormBuilder (pro) forum?

 

No, I don't have FormBuilder. I'm talking about the default ProcessWire forms on frontend.

Below are the default markup & classes for the forms used by ProcessWire taken from wire/core/InputfieldWrapper.php. I can modify those with the "InputfieldWrapper::render" hook to change the form appearance but I don't know how to display form errors under inputs.

$defaultMarkup = array(
		'list' => "<ul {attrs}>{out}</ul>",
		'item' => "<li {attrs}>{out}</li>", 
		'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
		'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
		'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>", 
		'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
		'item_description' => "<p class='description'>{out}</p>", 
		'item_head' => "<h2>{out}</h2>", 
		'item_notes' => "<p class='notes'>{out}</p>",
		'item_detail' => "<p class='detail'>{out}</p>", 
		'item_icon' => "<i class='fa fa-fw fa-{name}'></i> ",
		'item_toggle' => "<i class='toggle-icon fa fa-fw fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
		// ALSO: 
		// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
		);

$defaultClasses = array(
		'form' => '', // additional clases for InputfieldForm (optional)
		'list' => 'Inputfields',
		'list_clearfix' => 'ui-helper-clearfix', 
		'item' => 'Inputfield {class} Inputfield_{name} ui-widget',
		'item_label' => '', // additional classes for InputfieldHeader (optional)
		'item_content' => '',  // additional classes for InputfieldContent (optional)
		'item_required' => 'InputfieldStateRequired', // class is for Inputfield
		'item_error' => 'ui-state-error InputfieldStateError', // note: not the same as markup[item_error], class is for Inputfield
		'item_collapsed' => 'InputfieldStateCollapsed',
		'item_column_width' => 'InputfieldColumnWidth',
		'item_column_width_first' => 'InputfieldColumnWidthFirst',
		'item_show_if' => 'InputfieldStateShowIf',
		'item_required_if' => 'InputfieldStateRequiredIf'
		// ALSO: 
		// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
		);

 

[fliwire]

		$markup = array(
			'item_content' => "<div class='InputfieldContent {class}'>{out}{error}{description}{notes}</div>",
		);

 

[PWaddict]

1 hour ago, fliwire said:

		$markup = array(
			'item_content' => "<div class='InputfieldContent {class}'>{out}{error}{description}{notes}</div>",
		);

 

Perfect ? Thanks a lot!