earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): toggle required attr on hidden fields when switching postcard status

Browse Source
This commit is contained in:
Zichao Lin
2026-07-05 20:12:13 +08:00
parent f1a9bf7335
commit 5d7e70f820
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/templates/postcard_form.html
View File

@@ -17,20 +17,20 @@
<div id="fields-sent-delivered"> <div id="fields-sent-delivered">
<label>收件人 *</label> <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> <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> <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> <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>
<div id="fields-received" style="display:none"> <div id="fields-received" style="display:none">
<label>发件人 *</label> <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> <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>
<div class="form-actions"> <div class="form-actions">
@@ -43,8 +43,16 @@ function toggleFields() {
var s = document.getElementById('status-select').value; var s = document.getElementById('status-select').value;
var sd = document.getElementById('fields-sent-delivered'); var sd = document.getElementById('fields-sent-delivered');
var rc = document.getElementById('fields-received'); var rc = document.getElementById('fields-received');
sd.style.display = (s === 'received') ? 'none' : ''; var isSent = (s !== 'received');
rc.style.display = (s === 'received') ? '' : 'none'; 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(); toggleFields();
</script> </script>