If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
While Trongate MX enhances form handling with dynamic features, it's important to understand how to leverage HTML5's built-in form validation attributes and other useful form properties. These attributes can improve user experience by providing immediate feedback before form submission.
Making Fields Required
To make specific fields required in your form, add the 'required' attribute to individual form elements:
Here's how to implement this using Trongate's helper functions:
The autocomplete attribute controls whether browsers should offer to save and auto-fill form data. This can be particularly important for login forms and sensitive information:
First, let's look at how to implement this using Trongate's helper functions:
<?php
// Example 1: Disable autocomplete for the entire form
$form_attr = [
'mx-post' => 'users/login',
'autocomplete' => 'off'
];
echo form_open('#', $form_attr);
echo form_label('Username');
echo form_input('username', '');
echo form_label('Password');
echo form_password('password', '');
echo form_submit('submit', 'Login');
echo form_close();
// Example 2: Enable autocomplete but with specific field behaviors
$form_attr = [
'mx-post' => 'users/register'
];
echo form_open('#', $form_attr);
// Encourage browsers to suggest a new password
$password_attr = [
'autocomplete' => 'new-password'
];
echo form_label('Choose Password');
echo form_password('password', '', $password_attr);
// Allow autocomplete for non-sensitive information
$email_attr = [
'autocomplete' => 'email'
];
echo form_label('Email');
echo form_input('email', '', $email_attr);
echo form_submit('submit', 'Register');
echo form_close();
?>
Here's how to achieve the same functionality using standard HTML:
<!-- Example 1: Disable autocomplete for the entire form -->
<form mx-post="users/login" autocomplete="off">
<label>Username</label>
<input type="text" name="username">
<label>Password</label>
<input type="password" name="password">
<button type="submit">Login</button>
</form>
<!-- Example 2: Enable autocomplete with specific field behaviors -->
<form mx-post="users/register">
<label>Choose Password</label>
<input type="password"
name="password"
autocomplete="new-password">
<label>Email</label>
<input type="text"
name="email"
autocomplete="email">
<button type="submit">Register</button>
</form>
Common Validation Attributes:
required: Field must be filled out before submission
minlength: Minimum number of characters for text input
maxlength: Maximum number of characters for text input
min: Minimum value for numeric inputs
max: Maximum value for numeric inputs
pattern: Regular expression pattern for validation
Autocomplete Values:
off: Suggests that browsers should not automatically enter or select a value for this field
new-password: Indicates this field is for a new password, helping password managers suggest strong passwords
email: Indicates this field expects an email address
tel: Indicates this field expects a telephone number
Summary
HTML form attributes and client-side validation provide an essential first line of defense against invalid data while improving user experience. While client-side validation enhances user experience, remember to always implement server-side validation for security. Each validation attribute serves a specific purpose, and using them appropriately helps create more user-friendly forms.