Displaying Validation Errors

When validation errors are produced by Trongate's Validation class, it is standard practice to re-present forms to users. This approach allows users to correct their input without losing the information they have already entered.

The typical technique for re-presenting forms to end users is to invoke the method responsible for displaying the previous page (i.e., the page that renders the HTML form). For example:

$result = $this->validation->run();

if ($result === true) {

    echo 'Form submission successful!'; // This will be improved later!

} else {

    // Form submission error (re-present the form to the user)
    $this->create();

}

By immediately re-invoking the create() method, as shown above, the entire page that renders the HTML form will be rendered again.

When the form is re-presented to the user, an array of form validation errors will be made available.

There are two techniques that can be used to display validation errors:

1. Traditional
2. Inline

1. Traditional Validation Errors Display

This approach involves displaying all validation errors at once, typically at the top of the form.

How to Implement:

1. Use the run() method to execute form validation tests.
2. If the validation tests produce a $result that is not equal to true, re-invoke the method responsible for rendering the form page. For example:

$result = $this->validation->run();

if ($result === true) {
    echo 'Form submission successful!'; // This will be improved later
} else {
    // Form submission error (re-present the form to the user)
    $this->create();
}
        

3. In your view file, use the validation_errors() function to display all validation errors. The code below demonstrates how to render validation errors using PHP short tags:

<?= validation_errors() ?>

The validation_errors() method will display all of the form validation errors together. The line of code responsible for rendering the validation errors is usually positioned inside a view file and above the corresponding form.

2. Inline Validation Errors Display

Trongate offers an alternative methodology for displaying form validation errors inline. With inline validation errors applied, individual form validation errors are displayed next to their respective form fields, providing more context for the end user.

How to Implement:

1. Add the class 'highlight-errors' to your form tag.
2. For each form field, use the validation_errors() function with the field name as an argument.

For example:

echo form_open($form_location, array('class' => 'highlight-errors'));

echo form_label('Username');
echo validation_errors('username');
echo form_input('username', $username, array("placeholder" => "Enter Username"));

echo form_label('First Name');
echo validation_errors('first_name');
echo form_input('first_name', $first_name, array("placeholder" => "Enter First Name"));

echo form_label('Last Name');
echo validation_errors('last_name');
echo form_input('last_name', $last_name, array("placeholder" => "Enter Last Name"));

echo form_label('Email Address');
echo validation_errors('email_address');
echo form_input('email_address', $email_address, array("placeholder" => "Enter Email Address"));

echo form_submit('submit', 'Submit');
echo anchor($cancel_url, 'Cancel', array('class' => 'button alt'));
echo form_close();

This method will display errors inline, next to their respective fields.

.validation-error-alert {
    display: none;
}

By effectively utilizing these validation error display techniques, you can create user-friendly forms that provide clear feedback, improving the overall user experience of your Trongate application.