Merge pull request #4153 from matrix-org/t3chguy/alias_invalid_valid

don't show "This alias is available to use" if the alias is invalid

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;

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