HTML's Built-In Validation Attributes

While Trongate MX enhances form handling with dynamic features, it’s important to understand and utilise 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
  <input type="text" name="username" required>
• minlength: Minimum number of characters for text input
  <input type="text" name="username" minlength="3">
• maxlength: Maximum number of characters for text input
  <input type="text" name="username" maxlength="30">
• min: Minimum value for numeric inputs
  <input type="number" name="quantity" min="1">
• max: Maximum value for numeric inputs
  <input type="number" name="quantity" max="100">
• pattern: Regular expression pattern for validation
  <input type="text" name="zipcode" pattern="\d{5}">
• email: Indicates this field expects an email address
  <input type="email" name="email" autocomplete="email">
• tel: Indicates this field expects a telephone number
  <input type="tel" name="phone" autocomplete="tel">

Autocomplete Values

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

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.

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.