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

51
src/components/views/auth/RegistrationForm.js
View file

@ -94,7 +94,6 @@ module.exports = React.createClass({
this.validateField(FIELD_EMAIL, ev.type);
this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
this.validateField(FIELD_PASSWORD, ev.type);
this.validateField(FIELD_USERNAME, ev.type);
const allFieldsValid = this.verifyFieldsBeforeSubmit();
if (!allFieldsValid) {
@ -142,23 +141,38 @@ module.exports = React.createClass({
},
verifyFieldsBeforeSubmit() {
if (this.allFieldsValid()) {
return true;
}
const invalidField = this.findFirstInvalidField([
const fieldIDsInDisplayOrder = [
FIELD_USERNAME,
FIELD_PASSWORD,
FIELD_PASSWORD_CONFIRM,
FIELD_EMAIL,
FIELD_PHONE_NUMBER,
]);
];
// Run all fields with stricter validation that no longer allows empty
// values for required fields.
for (const fieldID of fieldIDsInDisplayOrder) {
const field = this[fieldID];
if (!field) {
continue;
}
field.validate({ allowEmpty: false });
}
if (this.allFieldsValid()) {
return true;
}
const invalidField = this.findFirstInvalidField(fieldIDsInDisplayOrder);
if (!invalidField) {
return true;
}
// Focus the first invalid field and show feedback in the stricter mode
// that no longer allows empty values for required fields.
invalidField.focus();
invalidField.validate({ allowEmpty: false, focused: true });
return false;
},
@ -215,21 +229,6 @@ module.exports = React.createClass({
} else this.markFieldError(fieldID, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
break;
}
case FIELD_USERNAME: {
const username = this.state.username;
if (allowEmpty && username === '') {
this.markFieldError(fieldID, true);
} else if (username == '') {
this.markFieldError(
fieldID,
false,
"RegistrationForm.ERR_USERNAME_BLANK",
);
} else {
this.markFieldError(fieldID, true);
}
break;
}
case FIELD_PASSWORD:
if (allowEmpty && pwd1 === "") {
this.markFieldError(fieldID, true);
@ -358,9 +357,14 @@ module.exports = React.createClass({
validateUsernameRules: withValidation({
description: () => _t("Use letters, numbers, dashes and underscores only"),
rules: [
{
key: "required",
test: ({ value, allowEmpty }) => allowEmpty || !!value,
invalid: () => _t("Enter username"),
},
{
key: "safeLocalpart",
regex: SAFE_LOCALPART_REGEX,
test: ({ value }) => !value || SAFE_LOCALPART_REGEX.test(value),
invalid: () => _t("Some characters not allowed"),
},
],
@ -393,7 +397,6 @@ module.exports = React.createClass({
renderUsername() {
const Field = sdk.getComponent('elements.Field');
return <Field
className={this._classForField(FIELD_USERNAME)}
id="mx_RegistrationForm_username"
ref={field => this[FIELD_USERNAME] = field}
type="text"