diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.js index 007bd07a47..b38047cd3b 100644 --- a/src/components/views/elements/RoomAliasField.js +++ b/src/components/views/elements/RoomAliasField.js @@ -92,6 +92,7 @@ export default class RoomAliasField extends React.PureComponent { invalid: () => _t("Please provide a room alias"), }, { key: "taken", + final: true, test: async ({value}) => { if (!value) { return true; diff --git a/src/components/views/elements/Validation.js b/src/components/views/elements/Validation.js index 31363b87c8..2be526a3c3 100644 --- a/src/components/views/elements/Validation.js +++ b/src/components/views/elements/Validation.js @@ -28,9 +28,11 @@ 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. + * - `skip`: A function used to determine whether the rule should even be evaluated. * - `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. + * - `final`: A Boolean if true states that this rule will only be considered if all rules before it returned valid. * @returns {Function} * A validation function that takes in the current input value and returns * the overall validity and a feedback UI that can be rendered for more detail. @@ -51,9 +53,20 @@ export default function withValidation({ description, rules }) { if (!rule.key || !rule.test) { continue; } + + if (!valid && rule.final) { + continue; + } + + const data = { value, allowEmpty }; + + if (rule.skip && rule.skip.call(this, data)) { + continue; + } + // We're setting `this` to whichever component holds the validation // function. That allows rules to access the state of the component. - const ruleValid = await rule.test.call(this, { value, allowEmpty }); + const ruleValid = await rule.test.call(this, data); valid = valid && ruleValid; if (ruleValid && rule.valid) { // If the rule's result is valid and has text to show for