feat: add form validation and disable submit buttons when fields are empty

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-02-11 17:04:55 +08:00
parent b69df2454e
commit b35874b120
36 changed files with 1287 additions and 39 deletions

View File

@@ -39,6 +39,16 @@ function EditProgramInovasi() {
})
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.description?.trim() !== '' &&
formData.link?.trim() !== '' &&
(formData.imageId?.trim() !== '' || file !== null)
);
};
const [originalData, setOriginalData] = useState({
name: "",
description: "",
@@ -271,8 +281,11 @@ function EditProgramInovasi() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

View File

@@ -31,6 +31,16 @@ function CreateProgramInovasi() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateProgramInovasi.create.form.name?.trim() !== '' &&
stateProgramInovasi.create.form.description?.trim() !== '' &&
stateProgramInovasi.create.form.link?.trim() !== '' &&
file !== null
);
};
useEffect(() => {
stateProgramInovasi.findMany.load();
}, []);
@@ -221,8 +231,11 @@ function CreateProgramInovasi() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}