imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for validating more strictly at submit time

Browse source 
When submitting a form, we want to validate more strictly to check for empty
values that might be required. A separate mode is used since we want to ignore
this issue when visiting a field one by one to enter data.

As an example, we convert the pre-existing logic for the username requirement
using this new support.
This commit is contained in:
J. Ryan Stinnett 2019-04-18 21:33:37 +01:00
parent a7c37733b8
commit 1cbb4be6f7
5 changed files with 36 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/views/elements/Field.js
View file

@ -87,14 +87,15 @@ export default class Field extends React.PureComponent {
this.input.focus();
}
validate({ focused }) {
validate({ focused, allowEmpty = true }) {
if (!this.props.onValidate) {
return;
}
const { value } = this.input;
const value = this.input ? this.input.value : null;
const { valid, feedback } = this.props.onValidate({
value,
focused,
allowEmpty,
});
this.setState({
valid,

10
src/components/views/elements/Validation.js
View file

@ -26,7 +26,7 @@ import classNames from 'classnames';
* An array of rules describing how to check to input value. Each rule in an object
* and may have the following properties:
* - `key`: A unique ID for the rule. Required.
* - `regex`: A regex used to determine the rule's current validity. Required.
* - `test`: A function used to determine the rule's current validity. Required.
* - `valid`: Function returning text to show when the rule is valid. Only shown if set.
* - `invalid`: Function returning text to show when the rule is invalid. Only shown if set.
* @returns {Function}
@ -34,9 +34,9 @@ import classNames from 'classnames';
* the overall validity and a feedback UI that can be rendered for more detail.
*/
export default function withValidation({ description, rules }) {
return function onValidate({ value, focused }) {
return function onValidate({ value, focused, allowEmpty = true }) {
// TODO: Re-run only after ~200ms of inactivity
if (!value) {
if (!value && allowEmpty) {
return {
valid: null,
feedback: null,
@ -47,10 +47,10 @@ export default function withValidation({ description, rules }) {
let valid = true;
if (rules && rules.length) {
for (const rule of rules) {
if (!rule.key || !rule.regex) {
if (!rule.key || !rule.test) {
continue;
}
const ruleValid = rule.regex.test(value);
const ruleValid = rule.test({ value, allowEmpty });
valid = valid && ruleValid;
if (ruleValid && rule.valid) {
// If the rule's result is valid and has text to show for