From 5d7e70f820f310de81fbda5fbf09b9db254642f0 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Sun, 5 Jul 2026 20:12:13 +0800
Subject: [PATCH] fix(ui): toggle required attr on hidden fields when switching
 postcard status

---
 app/templates/postcard_form.html | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/templates/postcard_form.html b/app/templates/postcard_form.html
index 76bcdf2..55f00c2 100644
--- a/app/templates/postcard_form.html
+++ b/app/templates/postcard_form.html
@@ -17,20 +17,20 @@
 
     <div id="fields-sent-delivered">
         <label>收件人 *</label>
-        <input type="text" name="recipient_name" value="{{ postcard.recipient_name if postcard else '' }}" required>
+        <input type="text" name="recipient_name" value="{{ postcard.recipient_name if postcard else '' }}" required data-group="sent-delivered">
         <label>国家/地区 *</label>
-        <input type="text" name="country" value="{{ postcard.country if postcard else '' }}" required maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase">
+        <input type="text" name="country" value="{{ postcard.country if postcard else '' }}" required maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" data-group="sent-delivered">
         <label>寄出时间</label>
-        <input type="date" name="send_time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
+        <input type="date" name="send_time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}" data-group="sent-delivered">
         <label>到达时间</label>
-        <input type="date" name="arrival_time" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}">
+        <input type="date" name="arrival_time" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}" data-group="sent-delivered">
     </div>
 
     <div id="fields-received" style="display:none">
         <label>发件人 *</label>
-        <input type="text" name="sender_name" value="{{ postcard.sender_name if postcard else '' }}" required>
+        <input type="text" name="sender_name" value="{{ postcard.sender_name if postcard else '' }}" required data-group="received">
         <label>收到时间</label>
-        <input type="date" name="receive_time" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}">
+        <input type="date" name="receive_time" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}" data-group="received">
     </div>
 
     <div class="form-actions">
@@ -43,8 +43,16 @@ function toggleFields() {
     var s = document.getElementById('status-select').value;
     var sd = document.getElementById('fields-sent-delivered');
     var rc = document.getElementById('fields-received');
-    sd.style.display = (s === 'received') ? 'none' : '';
-    rc.style.display = (s === 'received') ? '' : 'none';
+    var isSent = (s !== 'received');
+    sd.style.display = isSent ? '' : 'none';
+    rc.style.display = isSent ? 'none' : '';
+    // toggle required on hidden fields
+    sd.querySelectorAll('[data-group="sent-delivered"]').forEach(function(el) {
+        el.required = isSent;
+    });
+    rc.querySelectorAll('[data-group="received"]').forEach(function(el) {
+        el.required = !isSent;
+    });
 }
 toggleFields();
 </script>