Trim and validate locked fields (if they are required)
This commit is contained in:
parent
9aa660fdb2
commit
182c56b72c
1 changed files with 63 additions and 48 deletions
|
|
@ -166,6 +166,7 @@ class ContactDetailsScreen extends React.Component {
|
|||
const contact = Object.assign({}, this.state.contact);
|
||||
|
||||
const defaultForms = Form.getAll(InputStatus.DEFAULT);
|
||||
const lockedForms = Form.getAll(InputStatus.LOCKED);
|
||||
|
||||
console.debug('save Contact');
|
||||
|
||||
|
|
@ -181,19 +182,27 @@ class ContactDetailsScreen extends React.Component {
|
|||
console.debug('invalid prop email');
|
||||
error = error.concat(i18n.t('error.invalid_email_address') + '.\n');
|
||||
}
|
||||
|
||||
if (contact.firstname && contact.firstname.length >= 255) {
|
||||
console.debug('invalid prop invalid_firstname');
|
||||
error = error.concat(i18n.t('contact.invalid_firstname') + '.\n');
|
||||
}
|
||||
if (contact.lastname && contact.lastname.length >= 255) {
|
||||
console.debug('invalid prop lastname');
|
||||
error = error.concat(i18n.t('contact.invalid_lastname') + '.\n');
|
||||
}
|
||||
if (contact.phone && contact.phone.length >= 255) {
|
||||
console.debug('invalid prop phone');
|
||||
error = error.concat(i18n.t('contact.invalid_phone') + '.\n');
|
||||
}
|
||||
const lockedFields = ['firstname', 'lastname', 'phone'];
|
||||
lockedFields.forEach(fieldName => {
|
||||
const form = lockedForms.find(inputForm => inputForm.name === fieldName);
|
||||
if (!form) {
|
||||
throw new Error(`failed to get form ${fieldName}`);
|
||||
}
|
||||
if (contact[fieldName]?.length) {
|
||||
contact[fieldName] = contact[fieldName].trim();
|
||||
}
|
||||
if (form.required && !contact[fieldName]?.length) {
|
||||
error = error.concat(
|
||||
i18n.t('contact_details_s.input_required', {
|
||||
placeholder: form.placeholder[i18n.locale],
|
||||
}) + '.\n',
|
||||
);
|
||||
}
|
||||
if (contact[fieldName] && contact[fieldName]?.length >= 255) {
|
||||
console.debug(`invalid prop invalid_${fieldName}`);
|
||||
error = error.concat(i18n.t(`contact.invalid_${fieldName}`) + '.\n');
|
||||
}
|
||||
});
|
||||
|
||||
contact.data.forEach(input => {
|
||||
const formToValidate = defaultForms.find(
|
||||
|
|
@ -208,18 +217,21 @@ class ContactDetailsScreen extends React.Component {
|
|||
);
|
||||
}
|
||||
if (
|
||||
input?.value?.length &&
|
||||
input?.value?.length > 255 &&
|
||||
(formToValidate.type === InputType.EMAIL ||
|
||||
formToValidate.type === InputType.PHONE ||
|
||||
formToValidate.type === InputType.TEXT)
|
||||
formToValidate.type === InputType.EMAIL ||
|
||||
formToValidate.type === InputType.PHONE ||
|
||||
formToValidate.type === InputType.TEXT
|
||||
) {
|
||||
console.debug('invalid data ', input.formSlug);
|
||||
error = error.concat(
|
||||
i18n.t('contact_details_s.input_too_long', {
|
||||
placeholder: formToValidate.placeholder[i18n.locale],
|
||||
}) + '.\n',
|
||||
);
|
||||
if (input?.value?.length) {
|
||||
input.value = input.value.trim();
|
||||
}
|
||||
if (input?.value?.length > 255) {
|
||||
console.debug('invalid data ', input.formSlug);
|
||||
error = error.concat(
|
||||
i18n.t('contact_details_s.input_too_long', {
|
||||
placeholder: formToValidate.placeholder[i18n.locale],
|
||||
}) + '.\n',
|
||||
);
|
||||
}
|
||||
}
|
||||
if (
|
||||
input?.value?.length &&
|
||||
|
|
@ -1075,36 +1087,39 @@ class ContactDetailsScreen extends React.Component {
|
|||
keyboardType,
|
||||
isVisible,
|
||||
) {
|
||||
/** @type {typeof import('./../Models/Contact').ContactData} */
|
||||
const contact = this.state.contact;
|
||||
/** @type {Array<import('./../Models/Contact').InputDataType>} */
|
||||
const allInputs = this.state.allInputs;
|
||||
const changeText = text => {
|
||||
if (isDefault) {
|
||||
const dataIndex = contact.data.findIndex(
|
||||
input => input.formSlug === slug,
|
||||
);
|
||||
// * Set value on data.
|
||||
contact.data[dataIndex].value = text;
|
||||
console.debug('data ', contact.data[dataIndex].value);
|
||||
} else {
|
||||
// * Set value on model
|
||||
contact[slug] = text;
|
||||
console.debug('prop ', contact[slug]);
|
||||
}
|
||||
allInputs[index].value = text;
|
||||
this.setState({
|
||||
contact: contact,
|
||||
allInputs: allInputs,
|
||||
});
|
||||
};
|
||||
return this.wrapper(
|
||||
placeHolder,
|
||||
requiredStr,
|
||||
isVisible,
|
||||
<TextInput
|
||||
value={this.state.allInputs[index].value}
|
||||
onChangeText={text => {
|
||||
text = text.trim();
|
||||
/** @type {typeof import('./../Models/Contact').ContactData} */
|
||||
const contact = this.state.contact;
|
||||
if (isDefault) {
|
||||
const dataIndex = contact.data.findIndex(
|
||||
input => input.formSlug === slug,
|
||||
);
|
||||
// * Set value on data.
|
||||
contact.data[dataIndex].value = text;
|
||||
console.debug('data ', contact.data[dataIndex].value);
|
||||
} else {
|
||||
// * Set value on model
|
||||
contact[slug] = text;
|
||||
console.debug('prop ', contact[slug]);
|
||||
}
|
||||
/** @type {Array<import('./../Models/Contact').InputDataType>} */
|
||||
const allInputs = this.state.allInputs;
|
||||
allInputs[index].value = text;
|
||||
this.setState({
|
||||
contact: contact,
|
||||
allInputs: allInputs,
|
||||
});
|
||||
}}
|
||||
onEndEditing={event =>
|
||||
changeText((event.nativeEvent?.text ?? '').trim())
|
||||
}
|
||||
onChangeText={changeText}
|
||||
style={{ ...styles.input, ...{ display: isVisible ? 'flex' : 'none' } }}
|
||||
placeholder={`${placeHolder} ${requiredStr}`}
|
||||
autoCapitalize={'none'}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue