[feature] Disable button when there're validation errors

This commit is contained in:
PauI Ostrovckij
2025-09-12 04:07:59 +03:00
parent a30d63dce7
commit b5ca0fbf94
7 changed files with 21 additions and 12 deletions

View File

@ -105,10 +105,19 @@ export const useFieldValidation = () => {
});
}, []);
/**
* Checks if there are any validation errors
* @returns {boolean} True if there are validation errors
*/
const hasValidationErrors = useCallback(() => {
return Object.keys(fieldErrors).length > 0;
}, [fieldErrors]);
return {
validateField,
getFieldError,
clearFieldError,
hasValidationErrors,
isLoading,
error
};

View File

@ -22,7 +22,7 @@ function EmailConfig() {
const dispatch = useDispatch();
const config = useSelector(selectConfig);
const loading = useSelector(selectConfigLoading);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
const [activeTab, setActiveTab] = useState('smtp-server');
@ -266,7 +266,7 @@ function EmailConfig() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>

View File

@ -20,7 +20,7 @@ function Expiration() {
const dispatch = useDispatch();
const config = useSelector(selectConfig);
const loading = useSelector(selectConfigLoading);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
const [activeTab, setActiveTab] = useState('garbage-collection');
@ -228,7 +228,7 @@ function Expiration() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>

View File

@ -14,7 +14,7 @@ function FileLimits() {
const dispatch = useDispatch();
const config = useSelector(selectConfig);
const loading = useSelector(selectConfigLoading);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
// Local state for form fields
const [localSettings, setLocalSettings] = useState({
@ -224,7 +224,7 @@ function FileLimits() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>

View File

@ -13,7 +13,7 @@ import styles from './RequestFiltering.module.scss';
function RequestFiltering() {
const dispatch = useDispatch();
const { config, loading } = useSelector(state => state.config);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
const [localSettings, setLocalSettings] = useState({
allowPrivateIPAddress: false,
@ -128,7 +128,7 @@ function RequestFiltering() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>

View File

@ -19,7 +19,7 @@ function SecuritySettings() {
const dispatch = useDispatch();
const config = useSelector(selectConfig);
const loading = useSelector(selectConfigLoading);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
const [activeTab, setActiveTab] = useState('ip-filtering');
const [localRules, setLocalRules] = useState([]);
@ -123,7 +123,7 @@ function SecuritySettings() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>

View File

@ -15,7 +15,7 @@ function WOPISettings() {
const config = useSelector(selectConfig);
const schema = useSelector(selectSchema);
const loading = useSelector(selectConfigLoading);
const { validateField, getFieldError } = useFieldValidation();
const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
// Local state for WOPI enable setting
const [localWopiEnabled, setLocalWopiEnabled] = useState(false);
@ -87,7 +87,7 @@ function WOPISettings() {
<div className={styles.actions}>
<SaveButton
onClick={handleSave}
disabled={!hasChanges}
disabled={!hasChanges || hasValidationErrors()}
>
Save Changes
</SaveButton>