Add client-side HTML form input validation

This commit is contained in:
Marcono1234 2021-12-29 21:02:04 +01:00
parent 19e2a4fe9f
commit 42fa33e406
4 changed files with 8 additions and 8 deletions

View File

@ -63,7 +63,7 @@
{# Key count input #} {# Key count input #}
<div class="form-group"> <div class="form-group">
<label for="key_count">Generate keys</label> <label for="key_count">Generate keys</label>
<input type="number" class="form-control" name="key_count" placeholder="Enter number of keys..."> <input type="number" class="form-control" name="key_count" placeholder="Enter number of keys..." required min="1">
<small class="form-text text-muted">Number of keys to create.</small> <small class="form-text text-muted">Number of keys to create.</small>
</div> </div>

View File

@ -36,7 +36,7 @@
{# Account Name input #} {# Account Name input #}
<div class="form-group"> <div class="form-group">
<label for="character_name">Character Name</label> <label for="character_name">Character Name</label>
<input type="text" class="form-control" name="character_name" placeholder="Enter username..."> <input type="text" class="form-control" name="character_name" placeholder="Enter username..." required minlength="1">
<small class="form-text text-muted">Full character name.</small> <small class="form-text text-muted">Full character name.</small>
</div> </div>

View File

@ -36,13 +36,13 @@
{# Admin Username input #} {# Admin Username input #}
<div class="form-group"> <div class="form-group">
<label for="account_name">Username</label> <label for="account_name">Username</label>
<input type="text" class="form-control" name="account_name" placeholder="Enter username..."> <input type="text" class="form-control" name="account_name" placeholder="Enter username..." required minlength="1">
</div> </div>
{# Admin password input #} {# Admin password input #}
<div class="form-group"> <div class="form-group">
<label for="account_password">Password</label> <label for="account_password">Password</label>
<input type="password" class="form-control" name="account_password" placeholder="Enter password..."> <input type="password" class="form-control" name="account_password" placeholder="Enter password..." required minlength="1">
<small class="form-text text-muted"></small> <small class="form-text text-muted"></small>
</div> </div>

View File

@ -36,28 +36,28 @@
{# Play Key input #} {# Play Key input #}
<div class="form-group"> <div class="form-group">
<label for="play_key">Play Key</label> <label for="play_key">Play Key</label>
<input type="text" class="form-control" name="play_key" aria-describedby="emailHelp" placeholder="AAAA-BBBB-CCCC-DDDD" value="{{ key }}"> <input type="text" class="form-control" name="play_key" aria-describedby="emailHelp" placeholder="AAAA-BBBB-CCCC-DDDD" value="{{ key }}" required pattern="([A-Z0-9]{4}-){3}[A-Z0-9]{4}">
<small class="form-text text-muted">In the format: AAAA-BBBB-CCCC-DDDD</small> <small class="form-text text-muted">In the format: AAAA-BBBB-CCCC-DDDD</small>
</div> </div>
{# Account Name input #} {# Account Name input #}
<div class="form-group"> <div class="form-group">
<label for="account_name">Username</label> <label for="account_name">Username</label>
<input type="text" class="form-control" name="account_name" placeholder="Enter username..."> <input type="text" class="form-control" name="account_name" placeholder="Enter username..." required pattern="[a-zA-Z0-9]{1,32}">
<small class="form-text text-muted">Limited to a-z, A-Z, and 0-9. No spaces or special characters. Max 32 characters.</small> <small class="form-text text-muted">Limited to a-z, A-Z, and 0-9. No spaces or special characters. Max 32 characters.</small>
</div> </div>
{# Account Password input #} {# Account Password input #}
<div class="form-group"> <div class="form-group">
<label for="account_password">Password</label> <label for="account_password">Password</label>
<input type="password" class="form-control" name="account_password" placeholder="Enter password..."> <input type="password" class="form-control" name="account_password" placeholder="Enter password..." required minlength="4">
<small class="form-text text-muted"></small> <small class="form-text text-muted"></small>
</div> </div>
{# Account Repeat Password input #} {# Account Repeat Password input #}
<div class="form-group"> <div class="form-group">
<label for="account_repeat_password">Repeat Password</label> <label for="account_repeat_password">Repeat Password</label>
<input type="password" class="form-control" name="account_repeat_password" placeholder="Repeat password..."> <input type="password" class="form-control" name="account_repeat_password" placeholder="Repeat password..." required minlength="4">
<small class="form-text text-muted"></small> <small class="form-text text-muted"></small>
</div> </div>