mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-04 17:04:59 +03:00
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:
parent
64f80ed1b0
commit
290a7493f2
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
};
|
Loading…
Reference in New Issue
Block a user