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:
@@ -21,6 +21,11 @@ function EditKategoriPrestasi() {
|
||||
const [resetData, setResetData] = useState({ name: '' });
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Check if form is valid
|
||||
const isFormValid = () => {
|
||||
return formData.name?.trim() !== '';
|
||||
};
|
||||
|
||||
// Load data kategori prestasi saat component mount
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
@@ -123,8 +128,11 @@ function EditKategoriPrestasi() {
|
||||
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)',
|
||||
}}
|
||||
|
||||
@@ -15,6 +15,11 @@ function CreateKategoriPrestasi() {
|
||||
const stateKategori = useProxy(prestasiState.kategoriPrestasi)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Check if form is valid
|
||||
const isFormValid = () => {
|
||||
return stateKategori.create.form.name?.trim() !== '';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
stateKategori.findMany.load();
|
||||
}, []);
|
||||
@@ -84,8 +89,11 @@ function CreateKategoriPrestasi() {
|
||||
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)',
|
||||
}}
|
||||
|
||||
@@ -31,6 +31,15 @@ export default function EditPrestasiDesa() {
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Check if form is valid
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.name?.trim() !== '' &&
|
||||
formData.kategoriId?.trim() !== '' &&
|
||||
(formData.imageId?.trim() !== '' || file !== null)
|
||||
);
|
||||
};
|
||||
|
||||
const [originalData, setOriginalData] = useState({
|
||||
name: "",
|
||||
deskripsi: "",
|
||||
@@ -253,8 +262,11 @@ export default function EditPrestasiDesa() {
|
||||
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)',
|
||||
}}
|
||||
|
||||
@@ -21,6 +21,14 @@ function CreatePrestasiDesa() {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Check if form is valid
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
file !== null &&
|
||||
snapPrestasi.create.form.name?.trim() !== '' &&
|
||||
snapPrestasi.create.form.kategoriId?.trim() !== ''
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
prestasi.findMany.load();
|
||||
@@ -226,8 +234,11 @@ function CreatePrestasiDesa() {
|
||||
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)',
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user