Laravel Precognition
Easy Forms supports Laravel Precognition for real-time field validation. When enabled, form fields are validated on the server as users fill out the form, providing instant feedback before submission.
Enabling Precognition
To enable this feature, you need to set the precognition parameter to true on your form tag:
{{ easyform handle="contact" precognition="true" }}Some extra JavaScript is also needed. You can either load the bundled extra script:
<!-- resources/views/layout.antlers.html -->
<!doctype html>
<html lang="{{ site:short_locale }}">
[...]
<script src="/vendor/statamic-easy-forms/js/easy-forms.js"></script>
<script src="/vendor/statamic-easy-forms/js/easy-forms-precognition.js"></script>
</body>
</html>Or if you are loading Alpine.js through your build process, register the plugin manually as described at Laravel's documentation.
How it works
- Text fields: Validated when the user tabs or clicks away (on blur)
- Select, radio, checkboxes, toggles: Validated immediately on change
- Date picker: Validated when a date is selected or cleared
- Custom dropdowns (telephone, dictionary, improved select): Validated on selection
Validation errors appear instantly below each field, matching the same error display used for server-side validation after form submission.
Notes
- File upload fields (assets, files) are not validated via precognition as file validation requires the actual file upload
- ReCAPTCHA fields are excluded from precognition validation
- The precognition script (67 KB) is separate from the main Easy Forms script, so it only loads when needed
Should I use this?
It depends on your use case really. Generally, if you have short forms, this is not needed as validation during form submission is usually fine. However, for longer forms or if you have custom validation rules, it could be beneficial to give feedback to the user up front.
The precognition script (67 KB) is more than 10 times bigger than the main Easy Forms script, so take this into account if you like to keep your site's assets as small as possible.
Try both versions on the demo site to see the difference for yourself.
