wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: implement form validation for empty fields across multiple admin pages

Browse Source 
- Added validation to disable submit buttons when required fields are empty
- Implemented consistent validation patterns across various admin pages
- Applied validation to create and edit forms for berita, gallery, layanan, penghargaan, pengumuman, potensi, profil-desa, and ppid sections
- Used helper functions to check for empty HTML content in editor fields
- Ensured submit buttons are disabled until all required fields are filled

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-14 14:17:17 +08:00
parent b35874b120
commit 9678e6979b
41 changed files with 1131 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/admin/(dashboard)/desa/gallery/foto/[id]/edit/page.tsx
View File

@@ -45,6 +45,22 @@ function EditFoto() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
(file !== null || originalData.imagesId !== '') // Either a new file is selected or an existing image exists
);
};
const [originalData, setOriginalData] = useState({
name: "",
deskripsi: "",
@@ -94,6 +110,21 @@ function EditFoto() {
};
const handleSubmit = async () => {
if (!formData.name?.trim()) {
toast.error('Judul wajib diisi');
return;
}
if (isHtmlEmpty(formData.deskripsi)) {
toast.error('Deskripsi wajib diisi');
return;
}
if (!file && !originalData.imagesId) {
toast.error('Gambar wajib dipilih');
return;
}
try {
setIsSubmitting(true);
// Update global state hanya sekali di sini
@@ -285,8 +316,11 @@ function EditFoto() {
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, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

36
src/app/admin/(dashboard)/desa/gallery/foto/create/page.tsx
View File

@@ -30,6 +30,22 @@ function CreateFoto() {
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
FotoState.create.form.name?.trim() !== '' &&
!isHtmlEmpty(FotoState.create.form.deskripsi) &&
file !== null
);
};
const resetForm = () => {
FotoState.create.form = {
name: '',
@@ -41,6 +57,21 @@ function CreateFoto() {
};
const handleSubmit = async () => {
if (!FotoState.create.form.name?.trim()) {
toast.error('Judul wajib diisi');
return;
}
if (isHtmlEmpty(FotoState.create.form.deskripsi)) {
toast.error('Deskripsi wajib diisi');
return;
}
if (!file) {
toast.error('Gambar wajib dipilih');
return;
}
try {
setIsSubmitting(true);
if (!file) {
@@ -210,8 +241,11 @@ function CreateFoto() {
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, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

38
src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
View File

@@ -28,6 +28,24 @@ function EditVideo() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
return (
formData.name?.trim() !== '' &&
formData.linkVideo?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
embedLink !== null // Make sure the embed link is valid
);
};
const [originalData, setOriginalData] = useState({
name: "",
deskripsi: "",
@@ -86,6 +104,21 @@ function EditVideo() {
};
const handleSubmit = async () => {
if (!formData.name?.trim()) {
toast.error('Judul wajib diisi');
return;
}
if (!formData.linkVideo?.trim()) {
toast.error('Link YouTube wajib diisi');
return;
}
if (isHtmlEmpty(formData.deskripsi)) {
toast.error('Deskripsi wajib diisi');
return;
}
try {
setIsSubmitting(true);
const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
@@ -218,8 +251,11 @@ function EditVideo() {
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, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

42
src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
View File

@@ -28,6 +28,23 @@ function CreateVideo() {
const embedLink = convertYoutubeUrlToEmbed(link);
const [isSubmitting, setIsSubmitting] = useState(false);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
videoState.create.form.name?.trim() !== '' &&
link.trim() !== '' &&
!isHtmlEmpty(videoState.create.form.deskripsi) &&
embedLink !== null // Make sure the embed link is valid
);
};
const resetForm = () => {
videoState.create.form = {
name: '',
@@ -38,6 +55,26 @@ function CreateVideo() {
};
const handleSubmit = async () => {
if (!videoState.create.form.name?.trim()) {
toast.error('Judul wajib diisi');
return;
}
if (!link.trim()) {
toast.error('Link YouTube wajib diisi');
return;
}
if (isHtmlEmpty(videoState.create.form.deskripsi)) {
toast.error('Deskripsi wajib diisi');
return;
}
if (!embedLink) {
toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
return;
}
try {
setIsSubmitting(true);
if (!embedLink) {
@@ -168,8 +205,11 @@ function CreateVideo() {
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, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}