Quick Form Creation with FormBuilder
This is a manual, artisanal system for form validation. If you need to create forms quickly from your Models,
we recommend using the FormBuilder which can generate complete forms with validation in minutes:
→ Getting Started - Forms with FormBuilder
Validation
The system follows the Bootstrap standard for form validation.
<form class="was-validated">
<div class="mb-3">
<?php Form::textarea('myValidTextarea', 'Label', '', 4, ['required'=>true, 'invalid-feedback'=>'Please enter a message in the textarea.']); ?>
</div>
<?php
Form::checkboxes('myValidCheckboxes', ['1' => 'Check this checkbox'], '', false, ['invalid-feedback'=>'Example invalid feedback text', 'form-group-class'=>'mb-3'],['required'=>true]);
Form::radios('myValidRadios', ['1' => 'Toggle this radio', '2' => 'Or toggle this other radio'], '', false, ['label'=>'Select fields', 'invalid-feedback'=>'Please select a value', 'form-group-class'=>'mb-3'],['required'=>true]);
?>
<div class="mb-3">
<?php Form::select('mySelect', 'Label', [''=>'Open this select menu', '1' => 'One', '2' => 'Two', '3' => 'Three'], '', ['required'=>true, 'floating'=>true, 'invalid-feedback'=>Please select a value']); ?>
</div>
<div class="mb-3">
<?php Form::input('file', 'file', '', '', ['required'=>true, 'invalid-feedback'=>'Example invalid form file feedback']); ?>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
</div>
</form>
Custom JavaScript Validation
The framework automatically handles form validation. You can add custom validation logic by listening to specific JavaScript events.
Available Events
| Event | When | Usage |
|---|---|---|
fieldValidation |
On submit, and in real-time after first submit attempt | Add custom validation for specific fields |
customValidation |
On submit, before checking validity | Form-level validation involving multiple fields |
beforeFormSubmit |
After validation passes, before actual submit | Perform actions before submission (e.g., show loading) |
Example: Field Validation with Regex
Validate a phone number field using a regular expression:
document.addEventListener('DOMContentLoaded', function() {
const phoneField = document.querySelector('[name="phone"]')
if (phoneField) {
phoneField.addEventListener('fieldValidation', function(e) {
const field = e.detail.field
const phoneRegex = /^[0-9]{10}$/
if (!phoneRegex.test(field.value)) {
field.setCustomValidity('Phone must be 10 digits')
} else {
field.setCustomValidity('')
}
})
}
})
Example: Form-Level Validation
Validate multiple fields together:
document.addEventListener('DOMContentLoaded', function() {
const myForm = document.querySelector('#myForm')
if (myForm) {
myForm.addEventListener('customValidation', function(e) {
const form = e.detail.form
const startDate = form.querySelector('[name="start_date"]').value
const endDate = form.querySelector('[name="end_date"]').value
if (new Date(startDate) > new Date(endDate)) {
alert('End date must be after start date')
e.preventDefault()
return false
}
})
}
})
Invalid form via PHP
If the form is submitted, but some fields are wrong and an alert with error messages must be shown, you can use the MessagesHandler class.
<?php
MessagesHandler::addError('This is a test name error message', 'test-name');
echo MessagesHandler::getErrorAlert();
?>
<div class="bg-light p-2">
<div class="form-group col-xl-6">
<?php Form::input('text', 'test-name', 'Name', '', ['id'=>'my-custom-test-name-id', 'invalid-feedback'=>'Please enter a test name.']); ?>
</div>
</div>
From PHP you may want to specify which fields were not validated during form submission through the MessagesHandler class.
The functions are:
MessagesHandler::addError($msg, $field);
Adds an error message for a field
MessagesHandler::addFieldError($field);
Adds a field as invalid
MessagesHandler::getErrorAlert($field_name);
Returns an alert with error messages
Related Documentation
- Field Management: Adding, removing, modifying, and organizing form fields
- Conditional Field Visibility: Show/hide fields based on other field values
- Form Validation: Custom validation and error handling
- Organizing Fields in columns with Containers: Grouping fields into containers for better organization