Missing asterisk for required fields in review forms

j1shin · November 8, 2018, 9:19pm

Hi there,

i noticed that required fields of review forms don’t show the asterisk.
This is due a missing required parameter in the smarty section call at:

github.com

pkp/pkp-lib/blob/main/templates/reviewer/review/reviewFormResponse.tpl#L20


{iterate from=reviewFormElements item=reviewFormElement}
	{assign var=elementId value=$reviewFormElement->getId()}
	{assign var=value value=$reviewFormResponses.$elementId}

	{if in_array($reviewFormElement->getElementType(), array(REVIEW_FORM_ELEMENT_TYPE_CHECKBOXES, REVIEW_FORM_ELEMENT_TYPE_RADIO_BUTTONS))}
		{assign var=list value=true}
	{else}
		{assign var=list value=false}
	{/if}

	{fbvFormSection translate=false title=$reviewFormElement->getLocalizedQuestion() list=$list required=$reviewFormElement->getRequired()}
		{assign var=description value=$reviewFormElement->getLocalizedDescription()}
		{if $description}<div class="description">{$description}</div>{/if}
		{if $reviewFormElement->getElementType() == REVIEW_FORM_ELEMENT_TYPE_SMALL_TEXT_FIELD}
			{fbvElement name="reviewFormResponses[$elementId]" type="text" translate=false  id="reviewFormResponses-$elementId" value=$value inline=true size=$fbvStyles.size.SMALL readonly=$disabled}
		{elseif $reviewFormElement->getElementType() == REVIEW_FORM_ELEMENT_TYPE_TEXT_FIELD}
			{fbvElement name="reviewFormResponses[$elementId]" type="text" translate=false  id="reviewFormResponses-$elementId" value=$value readonly=$disabled}
		{elseif $reviewFormElement->getElementType() == REVIEW_FORM_ELEMENT_TYPE_TEXTAREA}
			{fbvElement name="reviewFormResponses[$elementId]" type="textarea" id="reviewFormResponses-$elementId" value=$value readonly=$disabled rows=4 cols=40}
		{elseif $reviewFormElement->getElementType() == REVIEW_FORM_ELEMENT_TYPE_CHECKBOXES}
			{assign var=possibleResponses value=$reviewFormElement->getLocalizedPossibleResponses()}

Adding required=$reviewFormElement->getRequired() certainly helps but it puts the asterisk below the label text because the html is rendered as

<label>
  <p>My label</p>
  <span class="req">*</span>
</label>

and <p> is a block element which comes from TinyMCE when entering the element title in the backend.

This is also not HTML5 compliant as <label> cannot contain <p>.

What about replacing <label> by <div>? Surely we would lose the link between a label (when rendered with for attribute) and the input field in but it would allow valid HTML.

Or how about adding a req class to label to allow adding a style like label.req > p:first-child:after { content: "*"; } to render the asterisk by CSS?

So lonG
Daniel

astevens · November 18, 2018, 3:42pm

Hi @j1shin,

Thanks for the suggestions. There is already an open issue for this: Improve "Required" field labels on review forms · Issue #2359 · pkp/pkp-lib · GitHub

Can you please comment there?

Thanks,
Amanda Stevens
Public Knowledge Project Team

j1shin · November 26, 2018, 9:05pm

Thx for the reply. Done via Improve "Required" field labels on review forms · Issue #2359 · pkp/pkp-lib · GitHub