Commit e52148b5 authored by Robert Lyon's avatar Robert Lyon Committed by Son Nguyen

Bug 1606730: Adding required message above forms with required fields

Also adding aria-required="true" to required fields

behatnotneeded - existing test are ok

Change-Id: Iaba02ea6653d28da298a0e410ab3d79773f810db
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 1a1df7fd
......@@ -77,3 +77,5 @@ $string['switchbox.on'] = 'On';
$string['switchbox.off'] = 'Off';
$string['switchbox.yes'] = 'Yes';
$string['switchbox.no'] = 'No';
$string['requiredfields'] = "Fields marked by '%s' are required.";
\ No newline at end of file
......@@ -2479,7 +2479,7 @@ function pieform_configure() {
'language' => current_language(),
'autofocus' => true,
'renderer' => $renderer,
'requiredmarker' => true,
'requiredmarker' => '*',
'elementclasses' => true,
'descriptionintwocells' => true,
'jsdirectory' => get_config('wwwroot') . 'lib/pieforms/static/core/',
......
......@@ -145,6 +145,9 @@ class Pieform {/*{{{*/
*/
private $submitted_by_dropzone = false;
private $has_required_fields = false;
private $all_required_field_labels_hidden = false;
private $submitvalue = 'submit';
/*}}}*/
......@@ -777,6 +780,13 @@ class Pieform {/*{{{*/
$result = $this->get_form_tag() . "\n";
}
if ($this->has_required_fields) {
$result .= '<div class="form-group requiredmarkerdesc';
if ($this->all_required_field_labels_hidden) {
$result .= ' hidden';
}
$result .= '">' . get_string('requiredfields', 'pieforms', $this->get_property('requiredmarker')) . '</div>';
}
$this->include_plugin('renderer', $this->data['renderer']);
// Form header
......@@ -1204,6 +1214,10 @@ EOF;
}
}
if (!empty($element['rules']['required'])) {
$result .= ' aria-required="true"';
}
return $result;
}/*}}}*/
......@@ -1493,7 +1507,14 @@ EOF;
$title = self::hsc($element['title']);
if ($this->get_property('requiredmarker') && !empty($element['rules']['required'])) {
$requiredmarker = ' <span class="requiredmarker">*</span>';
$requiredmarker = ' <span class="requiredmarker">' . $this->get_property('requiredmarker') . '</span>';
$this->has_required_fields = true;
if (!empty($element['hiddenlabel'])) {
$this->all_required_field_labels_hidden = true;
}
else {
$this->all_required_field_labels_hidden = false;
}
}
else {
$requiredmarker = '';
......
......@@ -174,7 +174,7 @@ function _render_elements_as_multicolumn($form, $element) {
$result .= '<th>';
$result .= Pieform::hsc($data['value']);
if ($form->get_property('requiredmarker') && !empty($data['rules']['required'])) {
$result .= ' <span class="requiredmarker">*</span>';
$result .= ' <span class="requiredmarker">' . $form->get_property('requiredmarker') . '</span>';
}
$result .= "</th>\n\t";
$count ++;
......
......@@ -37,9 +37,24 @@ jQuery(function($) {
// set first tab active
mahara.tabnav.find('li:first-child a').tab('show');
if ($(mahara.tabnav.find('li:first-child a').attr('href')).find('.requiredmarker').length) {
// show 'required' header message
mahara.tabnav.closest('form').find('.requiredmarkerdesc').removeClass('hidden');
}
else {
// hide 'required' header message
mahara.tabnav.closest('form').find('.requiredmarkerdesc').addClass('hidden');
}
// Store current tab on change
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
if ($($(e.target).attr('href')).find('.requiredmarker').length) {
// show 'required' header message
$(e.target).closest('form').find('.requiredmarkerdesc').removeClass('hidden');
}
else {
// hide 'required' header message
$(e.target).closest('form').find('.requiredmarkerdesc').addClass('hidden');
}
saveTab(e);
});
}
......
......@@ -4,6 +4,7 @@
<h4 id="{$prefix}_edit_heading" class="edit-heading">
{if $fileinfo}{if $fileinfo->artefacttype == 'folder'}{str tag=editfolder section=artefact.file}{else}{str tag=editfile section=artefact.file}{/if}{/if}
</h4>
<div class="form-group requiredmarkerdesc">{str tag='requiredfields' section='pieforms' arg1='*'}</div>
<div class="required form-group">
<label for="{$prefix}_edit_title">{str tag=name}<span class="requiredmarker"> *</span>
</label>
......
......@@ -527,6 +527,13 @@
color: darken($brand-danger, 5%);
}
&.requiredmarkerdesc {
color: darken($brand-danger, 5%);
border: 0;
font-style: italic;
font-size: $font-size-base - 1;
padding-bottom: 0;
}
@media (min-width: $screen-sm-min) {
&.input-small {
max-width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment