Updated error handling for on blur

refs https://github.com/TryGhost/members.js/issues/78

- Updates error handling to only trigger error for specific field on blur instead of all fields
This commit is contained in:
Rish 2020-07-30 14:37:22 +05:30
parent 64f80ed1b0
commit 290a7493f2
3 changed files with 27 additions and 11 deletions

View File

@ -130,15 +130,19 @@ export default class AccountProfilePage extends React.Component {
});
}
handleInputBlur(e) {
handleInputBlur(e, field) {
this.setState((state) => {
const fieldErrors = ValidateInputForm({fields: this.getInputFields({state, fieldNames: [field.name]})}) || {};
return {
errors: ValidateInputForm({fields: this.getInputFields({state})})
errors: {
...(state.errors || {}),
...fieldErrors
}
};
});
}
getInputFields({state}) {
getInputFields({state, fieldNames}) {
const errors = state.errors || {};
const fields = [
{
@ -160,7 +164,11 @@ export default class AccountProfilePage extends React.Component {
errorMessage: errors.email || ''
}
];
if (fieldNames && fieldNames.length > 0) {
return fields.filter((f) => {
return fieldNames.includes(f.name);
});
}
return fields;
}

View File

@ -121,15 +121,20 @@ class SignupPage extends React.Component {
handleInputChange(e, field) {
const fieldName = field.name;
const value = e.target.value;
this.setState({
[fieldName]: e.target.value
[fieldName]: value
});
}
handleInputBlur(e) {
handleInputBlur(e, field) {
this.setState((state) => {
const fieldErrors = ValidateInputForm({fields: this.getInputFields({state, fieldNames: [field.name]})}) || {};
return {
errors: ValidateInputForm({fields: this.getInputFields({state})})
errors: {
...(state.errors || {}),
...fieldErrors
}
};
});
}
@ -203,7 +208,7 @@ class SignupPage extends React.Component {
return plansData;
}
getInputFields({state}) {
getInputFields({state, fieldNames}) {
const {portal_name: portalName} = this.context.site;
const errors = state.errors || {};
@ -231,6 +236,11 @@ class SignupPage extends React.Component {
errorMessage: errors.name || ''
});
}
if (fieldNames && fieldNames.length > 0) {
return fields.filter((f) => {
return fieldNames.includes(f.name);
});
}
return fields;
}

View File

@ -16,9 +16,7 @@ export const ValidateInputForm = ({fields}) => {
fields.forEach((field) => {
const name = field.name;
const fieldError = FormInputError({field});
if (fieldError) {
errors[name] = fieldError;
}
errors[name] = fieldError;
});
return errors;
};