Demonstrates basic form fields and validation Async
<form id=""
class="pydantic-form needs-validation"
style=""
method="POST"
action="/login"
novalidate>
<div class="mb-3"><label for="username"><i class="bi bi-person"></i> Username *</label>
<input name="username" id="username" class="form-control" value="demo_user" required="required" minlength="3" maxlength="11" placeholder="Enter your username" pattern="\d{3}-\d{2}-\d{4}" inputmode="numeric" autocomplete="off" type="text" />
<div class="form-text">Your username or email address</div></div>
<div class="mb-3"><label for="password"><i class="bi bi-lock"></i> Password *</label>
<input name="password" id="password" class="form-control" value="demo_pass" required="required" minlength="6" placeholder="Enter your password" autocomplete="new-password" type="password" />
<div class="form-text">Your account password</div></div>
<div class="mb-3"><label for="remember_me"><i class="bi bi-check2-square"></i> Remember me</label>
<input name="remember_me" id="remember_me" class="form-check-input" checked="checked" value="1" type="checkbox" />
<div class="form-text">Keep me logged in on this device</div></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
// Prevent Enter key from submitting forms unless on submit button
const forms = document.querySelectorAll('form.pydantic-form');
forms.forEach(function(form) {
form.addEventListener('keydown', function(e) {
// Check if Enter key is pressed
if (e.key === 'Enter' || e.keyCode === 13) {
const target = e.target;
// Allow Enter in textareas (for multi-line input)
if (target.tagName === 'TEXTAREA') {
return;
}
// Allow Enter on submit buttons
if (target.tagName === 'BUTTON' && target.type === 'submit') {
return;
}
// Allow Enter on input type="submit"
if (target.tagName === 'INPUT' && target.type === 'submit') {
return;
}
// Prevent form submission for all other cases
e.preventDefault();
return false;
}
});
});
});
})();
</script>
class MinimalLoginForm(FormModel):
"""Minimal form example - Simple login form."""
username: str = FormField(
title="Username",
input_type="text",
placeholder="Enter your username",
help_text="Your username or email address",
icon="person",
min_length=3,
max_length=50
)
password: str = FormField(
title="Password",
input_type="password",
placeholder="Enter your password",
help_text="Your account password",
icon="lock",
min_length=6
)
remember_me: bool = FormField(
False,
title="Remember me",
input_type="checkbox",
help_text="Keep me logged in on this device",
icon="check2-square"
)
@field_validator("username")
@classmethod
def validate_username(cls, v):
if not v.strip():
raise ValueError("Username cannot be empty")
return v.strip()
{
"description": "Minimal form example - Simple login form.",
"properties": {
"username": {
"autofocus": false,
"description": "Your username or email address",
"disabled": false,
"help_text": "Your username or email address",
"icon": "person",
"input_type": "text",
"maxLength": 50,
"minLength": 3,
"placeholder": "Enter your username",
"readonly": false,
"title": "Username",
"type": "string"
},
"password": {
"autofocus": false,
"description": "Your account password",
"disabled": false,
"help_text": "Your account password",
"icon": "lock",
"input_type": "password",
"minLength": 6,
"placeholder": "Enter your password",
"readonly": false,
"title": "Password",
"type": "string"
},
"remember_me": {
"autofocus": false,
"default": false,
"description": "Keep me logged in on this device",
"disabled": false,
"help_text": "Keep me logged in on this device",
"icon": "check2-square",
"input_type": "checkbox",
"readonly": false,
"title": "Remember me",
"type": "boolean"
}
},
"required": [
"username",
"password"
],
"title": "MinimalLoginForm",
"type": "object"
}{
"username": {
"required": true,
"type": "string",
"minLength": 3,
"maxLength": 50
},
"password": {
"required": true,
"type": "string",
"minLength": 6
},
"remember_me": {
"required": false,
"type": "boolean"
}
}{
"errors": {},
"data": {
"username": "demo_user",
"password": "demo_pass",
"remember_me": true
}
}