mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-30 01:04:09 +02:00
Merge branch 'feature/mark-required-form-elements-as-required-8349'
resolves #8349
This commit is contained in:
commit
bdc05ec5f1
19
doc/accessibility/required-form-elements.html
Normal file
19
doc/accessibility/required-form-elements.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>Accessibility: Required form elements</title>
|
||||||
|
<meta name="description" content="Required form elements">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form>
|
||||||
|
<label>
|
||||||
|
Enter some text:
|
||||||
|
<input type="text" name="some_text" value="" aria-required="true" required>
|
||||||
|
</label>
|
||||||
|
<input type="submit" name="btn_submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -6,6 +6,7 @@ namespace Icinga\Web;
|
|||||||
use LogicException;
|
use LogicException;
|
||||||
use Zend_Config;
|
use Zend_Config;
|
||||||
use Zend_Form;
|
use Zend_Form;
|
||||||
|
use Zend_Form_Element;
|
||||||
use Zend_View_Interface;
|
use Zend_View_Interface;
|
||||||
use Icinga\Application\Icinga;
|
use Icinga\Application\Icinga;
|
||||||
use Icinga\Authentication\Manager;
|
use Icinga\Authentication\Manager;
|
||||||
@ -550,7 +551,24 @@ class Form extends Zend_Form
|
|||||||
unset($el->autosubmit);
|
unset($el->autosubmit);
|
||||||
}
|
}
|
||||||
|
|
||||||
return $el;
|
return $this->ensureElementAccessibility($el);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add accessibility related attributes
|
||||||
|
*
|
||||||
|
* @param Zend_Form_Element $element
|
||||||
|
*
|
||||||
|
* @return Zend_Form_Element
|
||||||
|
*/
|
||||||
|
public function ensureElementAccessibility(Zend_Form_Element $element)
|
||||||
|
{
|
||||||
|
if ($element->isRequired() && strpos(strtolower($element->getType()), 'checkbox') === false) {
|
||||||
|
$element->setAttrib('aria-required', 'true'); // ARIA
|
||||||
|
$element->setAttrib('required', ''); // HTML5
|
||||||
|
}
|
||||||
|
|
||||||
|
return $element;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -78,7 +78,7 @@ class AdminAccountPage extends Form
|
|||||||
'text',
|
'text',
|
||||||
'by_name',
|
'by_name',
|
||||||
array(
|
array(
|
||||||
'required' => isset($formData['user_type']) && $formData['user_type'] === 'by_name',
|
'required' => !isset($formData['user_type']) || $formData['user_type'] === 'by_name',
|
||||||
'value' => $this->getUsername(),
|
'value' => $this->getUsername(),
|
||||||
'label' => $this->translate('Username'),
|
'label' => $this->translate('Username'),
|
||||||
'description' => $this->translate(
|
'description' => $this->translate(
|
||||||
@ -87,6 +87,12 @@ class AdminAccountPage extends Form
|
|||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
if (! $this->request->isXmlHttpRequest()) {
|
||||||
|
// In case JS is disabled we must not provide client side validation as
|
||||||
|
// the user is required to input data even he has changed his mind
|
||||||
|
$this->getElement('by_name')->setAttrib('required', null);
|
||||||
|
$this->getElement('by_name')->setAttrib('aria-required', null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($this->backendConfig['backend'] === 'db' || $this->backendConfig['backend'] === 'ldap') {
|
if ($this->backendConfig['backend'] === 'db' || $this->backendConfig['backend'] === 'ldap') {
|
||||||
@ -111,6 +117,12 @@ class AdminAccountPage extends Form
|
|||||||
'multiOptions' => array_combine($users, $users)
|
'multiOptions' => array_combine($users, $users)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
if (! $this->request->isXmlHttpRequest()) {
|
||||||
|
// In case JS is disabled we must not provide client side validation as
|
||||||
|
// the user is required to input data even he has changed his mind
|
||||||
|
$this->getElement('existing_user')->setAttrib('required', null);
|
||||||
|
$this->getElement('existing_user')->setAttrib('aria-required', null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -149,6 +161,14 @@ class AdminAccountPage extends Form
|
|||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
if (! $this->request->isXmlHttpRequest()) {
|
||||||
|
// In case JS is disabled we must not provide client side validation as
|
||||||
|
// the user is required to input data even he has changed his mind
|
||||||
|
foreach (array('new_user', 'new_user_password', 'new_user_2ndpass') as $elementName) {
|
||||||
|
$this->getElement($elementName)->setAttrib('aria-required', null);
|
||||||
|
$this->getElement($elementName)->setAttrib('required', null);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (count($choices) > 1) {
|
if (count($choices) > 1) {
|
||||||
@ -157,6 +177,8 @@ class AdminAccountPage extends Form
|
|||||||
'user_type',
|
'user_type',
|
||||||
array(
|
array(
|
||||||
'required' => true,
|
'required' => true,
|
||||||
|
'autosubmit' => true,
|
||||||
|
'value' => key($choices),
|
||||||
'multiOptions' => $choices
|
'multiOptions' => $choices
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@ -218,6 +240,26 @@ class AdminAccountPage extends Form
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return whether the given values (possibly incomplete) are valid
|
||||||
|
*
|
||||||
|
* Unsets all empty text-inputs so that they are not being validated when auto-submitting the form.
|
||||||
|
*
|
||||||
|
* @param array $formData
|
||||||
|
*
|
||||||
|
* @return type
|
||||||
|
*/
|
||||||
|
public function isValidPartial(array $formData)
|
||||||
|
{
|
||||||
|
foreach (array('by_name', 'new_user', 'new_user_password', 'new_user_2ndpass') as $elementName) {
|
||||||
|
if (isset($formData[$elementName]) && $formData[$elementName] === '') {
|
||||||
|
unset($formData[$elementName]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return parent::isValidPartial($formData);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the name of the externally authenticated user
|
* Return the name of the externally authenticated user
|
||||||
*
|
*
|
||||||
|
@ -17,7 +17,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
|
|||||||
<?php if ($showRadioBoxes): ?>
|
<?php if ($showRadioBoxes): ?>
|
||||||
<div class="radiobox">
|
<div class="radiobox">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="user_type" value="by_name"<?= $radioElem->getValue() === 'by_name' ? ' checked' : ''; ?>>
|
<input type="radio" name="user_type" value="by_name"<?= $radioElem->getValue() === 'by_name' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
|
||||||
<?= $radioElem->getMultiOption('by_name'); ?>
|
<?= $radioElem->getMultiOption('by_name'); ?>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -32,7 +32,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
|
|||||||
<?php if ($showRadioBoxes): ?>
|
<?php if ($showRadioBoxes): ?>
|
||||||
<div class="radiobox">
|
<div class="radiobox">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="user_type" value="existing_user"<?= $radioElem->getValue() === 'existing_user' ? ' checked' : ''; ?>>
|
<input type="radio" name="user_type" value="existing_user"<?= $radioElem->getValue() === 'existing_user' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
|
||||||
<?= $radioElem->getMultiOption('existing_user'); ?>
|
<?= $radioElem->getMultiOption('existing_user'); ?>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -49,7 +49,7 @@ $showRadioBoxes = strpos(strtolower(get_class($radioElem)), 'radio') !== false;
|
|||||||
<?php if ($showRadioBoxes): ?>
|
<?php if ($showRadioBoxes): ?>
|
||||||
<div class="radiobox">
|
<div class="radiobox">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="user_type" value="new_user"<?= $radioElem->getValue() === 'new_user' ? ' checked' : ''; ?>>
|
<input type="radio" name="user_type" value="new_user"<?= $radioElem->getValue() === 'new_user' ? ' checked' : ''; ?> class="autosubmit" aria-required="true" required>
|
||||||
<?= $radioElem->getMultiOption('new_user'); ?>
|
<?= $radioElem->getMultiOption('new_user'); ?>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -118,8 +118,6 @@
|
|||||||
// Select a table row
|
// Select a table row
|
||||||
$(document).on('click', 'table.multiselect tr[href]', { self: this }, this.rowSelected);
|
$(document).on('click', 'table.multiselect tr[href]', { self: this }, this.rowSelected);
|
||||||
|
|
||||||
$(document).on('click', 'button', { self: this }, this.submitForm);
|
|
||||||
|
|
||||||
// We catch all form submit events
|
// We catch all form submit events
|
||||||
$(document).on('submit', 'form', { self: this }, this.submitForm);
|
$(document).on('submit', 'form', { self: this }, this.submitForm);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user