Jump to content
PWaddict

[SOLVED] How to display form errors under inputs?

Recommended Posts

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

Share this post


Link to post
Share on other sites

@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?).

Share this post


Link to post
Share on other sites
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)
		);

 

Share this post


Link to post
Share on other sites
		$markup = array(
			'item_content' => "<div class='InputfieldContent {class}'>{out}{error}{description}{notes}</div>",
		);

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, fliwire said:

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

 

Perfect 🙂 Thanks a lot!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...