🎨 Palette: 빈 문자열에 대한 인라인 유효성 검사 초기화 - #301
Conversation
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthrough숫자 입력이 빈 문자열이 되면 미리보기와 커스텀 유효성, Changes숫자 입력 유효성 검사
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
Updates the FastAPI UI template’s inline JavaScript validation so that when numeric inputs are cleared, any prior custom validity error and aria-invalid state are explicitly reset—preventing stale error messaging from overriding native HTML5 required behavior and avoiding incorrect screen reader announcements.
Changes:
- Add explicit empty-string handling for
target_bytesinput validation (clear preview, clear custom validity, removearia-invalid). - Add the same empty-string handling for
batch_target_bytes. - Document the pattern/learning in
.jules/palette.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
saas_web.py |
Resets custom validation + aria-invalid when numeric inputs are emptied (single + batch forms). |
.jules/palette.md |
Records the UI validation learning/action for empty numeric input states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (this.value === '') { | ||
| preview.innerText = ''; | ||
| this.setCustomValidity(''); | ||
| this.removeAttribute('aria-invalid'); | ||
| } else if (isNaN(val) || val <= 0) { |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@saas_web.py`:
- Around line 258-262: Update both handlers’ empty-value branches to require
this.value === '' && !this.validity.badInput before clearing the preview, custom
validity, and aria-invalid state. Preserve the existing invalid-number handling
for badInput cases so malformed numeric input retains its feedback.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 8357fc08-fd80-4a84-b50c-a7d8acdba903
📒 Files selected for processing (2)
.jules/palette.mdsaas_web.py
| if (this.value === '') { | ||
| preview.innerText = ''; | ||
| this.setCustomValidity(''); | ||
| this.removeAttribute('aria-invalid'); | ||
| } else if (isNaN(val) || val <= 0) { |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the file and inspect the relevant lines with context.
git ls-files | rg '(^|/)saas_web\.py$'
printf '\n--- file excerpt ---\n'
nl -ba saas_web.py | sed -n '240,310p'Repository: ContextualWisdomLab/codec-carver
Length of output: 244
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n--- saas_web.py excerpt ---\n'
sed -n '240,310p' saas_web.py | cat -n
printf '\n--- badInput references ---\n'
rg -n 'badInput|validity\.badInput|setCustomValidity|removeAttribute\('"'"'aria-invalid'"'"'\)' saas_web.pyRepository: ContextualWisdomLab/codec-carver
Length of output: 4998
🌐 Web query:
input type=number validity.badInput value empty invalid characters browser behavior MDN
💡 Result:
In an input element of type number, the validity.badInput property is a boolean that indicates whether the user has entered text that the browser cannot convert into a valid numerical value [1][2]. Browser Behavior When a user enters characters that are not part of a valid number (for example, typing letters into a number input), the browser deems the input invalid [3]. A key behavior of type=number inputs is how they handle the.value property in these situations: 1. Invalid Input: If the user enters a non-numeric string, the element's.value property will typically return an empty string (""), even though the input field itself visually contains the invalid characters [4]. 2. Detection: Because.value returns an empty string for both a truly empty field and an field with invalid non-numeric text, you cannot rely on.value alone to distinguish between them [4]. Instead, you must check the validity.badInput property [1][4]. 3. Validity State: If validity.badInput is true, it explicitly indicates that the browser is unable to convert the current raw input into a number [1][2][5]. Summary of Key Differences: - Empty Input: If the field is empty, validity.badInput is false. (Note: validity.valueMissing will be true if the required attribute is present) [3][4]. - Invalid Characters: If the field contains non-numeric characters (e.g., 'abc'), validity.badInput is true, and the element is considered invalid [1][3][4]. To identify the state of the input, you can use the following logic: if (input.validity.badInput) { // The user entered invalid characters (e.g., letters) } else if (input.value === "") { // The input is genuinely empty } else { // The input contains a valid number }
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput
- 2: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
- 3: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number
- 4: https://stackoverflow.com/questions/52872503/how-can-i-tell-if-an-input-type-number-is-blank-vs-has-an-invalid-value
- 5: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity
빈 값 처리에서 badInput을 제외해 주세요.
<input type="number">는 잘못된 문자 입력 시 value === ''처럼 보일 수 있습니다. 지금처럼 빈 값만 기준으로 미리보기와 aria-invalid를 지우면, 잘못된 숫자 입력의 피드백이 사라질 수 있으니 두 핸들러 모두 this.value === '' && !this.validity.badInput로 분기해 주세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@saas_web.py` around lines 258 - 262, Update both handlers’ empty-value
branches to require this.value === '' && !this.validity.badInput before clearing
the preview, custom validity, and aria-invalid state. Preserve the existing
invalid-number handling for badInput cases so malformed numeric input retains
its feedback.
💡 What: 숫자 입력 필드(
target_bytes,batch_target_bytes)에서 값이 비워졌을 때 커스텀 유효성 검사 오류와aria-invalid상태를 명시적으로 초기화하도록 수정했습니다.🎯 Why: 값을 지웠을 때 커스텀 오류 메시지(예: "Must be greater than 0.")가 남아있으면 브라우저의 기본
required제약 조건 메시지를 덮어쓰게 되어 사용자가 혼란을 겪을 수 있습니다.📸 Before/After: N/A
♿ Accessibility: 입력값이 비워졌을 때 스크린 리더가 이전의 잘못된 상태를 계속 읽는 문제를 방지하기 위해
aria-invalid속성을 올바르게 제거했습니다.PR created automatically by Jules for task 13325796297207445970 started by @seonghobae
Summary by CodeRabbit
버그 수정
문서