vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 4.2.2: Form Validation Implementation

Browse source 
- Add form-group wrappers and error message elements to HTML
- Implement comprehensive client-side validation for nickname and message inputs
- Add visual feedback using existing CSS validation classes
- Include success confirmation states and proper error handling
- Enhance accessibility with focus management and screen reader support
This commit is contained in:
VinnyNC 2025-09-29 23:17:11 -04:00
parent 45f07f763f
commit 54db215848
3 changed files with 131 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

16
index.php
View file

@ -461,8 +461,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<div class="chat__user-id-display">
Your ID: <span class="chat__user-id-badge" id="userId">Loading...</span>
</div>
<div class="chat__nickname-input">
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname">
<div class="form-group">
<div class="chat__nickname-input">
<input type="text" id="nickname" placeholder="Choose a nickname..." maxlength="20" autocomplete="off" aria-label="Enter your nickname">
</div>
<div class="form-error" id="nicknameError" style="display: none;"></div>
</div>
</section>
@ -481,9 +484,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
<section class="chat__input" aria-labelledby="chat-input-heading">
<h3 id="chat-input-heading" class="sr-only">Send Message</h3>
<div class="chat__input-group">
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message">
<button data-action="send-message" aria-label="Send message">Send</button>
<div class="form-group">
<div class="chat__input-group">
<input type="text" id="messageInput" placeholder="Type a message..." maxlength="1000" autocomplete="off" aria-label="Type your message">
<button data-action="send-message" aria-label="Send message">Send</button>
</div>
<div class="form-error" id="messageError" style="display: none;"></div>
</div>
</section>
</aside>