HTML's Built-In Validation Attributes

While Trongate MX enhances form handling with dynamic features, it’s important to understand and utilize HTML5’s built-in form validation attributes and related properties. These attributes provide users with immediate, intuitive feedback before form submission, improving overall user experience and reducing unnecessary server requests.

Common Validation Attributes

Below are some of the most commonly used attributes that harness the power of HTML5 validation - helping you catch input errors early and enhance the overall form experience.

required: Field must be filled out before submission
HTML
```
<input type="text" name="username" required>
```
minlength: Minimum number of characters for text input
HTML
```
<input type="text" name="username" minlength="3">
```
maxlength: Maximum number of characters for text input
HTML
```
<input type="text" name="username" maxlength="30">
```

min: Minimum value for numeric inputs

HTML

<input type="number" name="quantity" min="1">

max: Maximum value for numeric inputs

HTML

<input type="number" name="quantity" max="100">

pattern: Regular expression pattern for validation
HTML
```
<input type="text" name="zipcode" pattern="\d{5}">
```
email: Indicates this field expects an email address
HTML
```
<input type="email" name="email" autocomplete="email">
```
tel: Indicates this field expects a telephone number
HTML
```
<input type="tel" name="phone" autocomplete="tel">
```

Autocomplete Values

off: Suggests that browsers should not automatically enter or select a value for this field
HTML
```
<input type="text" name="email" autocomplete="off">
```
new-password: Indicates this field is for a new password, helping password managers suggest strong passwords
HTML
```
<input type="password" name="password" autocomplete="new-password">
```

For a comprehensive guide to all HTML5 form validation attributes and best practices, please refer to the authoritative resource at MDN Web Docs - Form Validation . This is an excellent source to deepen your understanding beyond the scope of this documentation.

Using Trongate's Form Helper Functions

So far, we have demonstrated how to add HTML5 validation attributes using raw HTML. However, within any view file of a Trongate application, you have access to a powerful set of form helper functions – available globally and with no need to load anything.

These helper functions provide a clean and structured way to generate form elements, all while maintaining full compatibility with HTML5 attributes such as required, pattern, min, and more.

Example - Required Email Field Using Helper Function

Below is an example of how to use Trongate's form_email() function to make a form field 'required'.

<?php
echo form_open('contact/submit');

echo form_email('email_address', '', [
  'required' => 'required',
  'placeholder' => 'Enter your email'
]);

echo form_close();
?>

Flexible and Consistent

These helper functions not only support the essential HTML5 attributes, but they also promote consistency and clarity in your views. Whether you’re generating a simple login form or a multi-step wizard, these helpers ensure that your code remains maintainable and elegant.

Full documentation, for Trongate’s form helper functions, is available in the Trongate Reference Guide. Additional guidance is available from the Trongate PHP Framework Documentation.

Summary

Using HTML5 validation attributes provides an essential, user-friendly first layer of feedback. However, always remember to complement client-side validation with robust server-side checks to ensure security and data integrity.

Next, we'll explore how to implement server-side validation for a truly comprehensive validation experience.

We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.

Share your thoughts in the Documentation Feedback.

Leave Feedback About This Page