Test an empty form, invalid input, and a valid submission. Verify that a failed submission leaves the entered values available and explains which field needs attention.<\/p>\n
Treat repeated submissions as a normal possibility. A disabled submit button helps interaction but cannot guarantee a write happens only once. Enforce any uniqueness or retry rules in the operation itself.<\/p>\n
Start with a named, required email field:<\/p>\n
<form id="garden-contact" method="post" action="postback">\n <label for="garden-email">{_ Email _}<\/label>\n <input id="garden-email" name="email" type="email">\n {% validate id="garden-email" name="email" type={presence} type={email} %}\n <button type="submit">{_ Check address _}<\/button>\n<\/form>\n{% wire id="garden-contact" type="submit" postback={check_email} delegate=`mod_garden` %}\n<\/code><\/pre>\nAdd this clause to the exported event\/2<\/code> in mod_garden<\/code>, using the header and declarations from the postback task. Broaden its spec to accept #postback{} | #submit{}<\/code> and separate clauses with a semicolon:<\/p>\nevent(#submit{message = {check_email, []}}, Context) ->\n case z_context:get_q_validated(<<"email">>, Context) of\n Email when is_binary(Email), Email =\/= <<>> ->\n z_render:growl(?__("Address checked; nothing was sent.", Context), Context);\n _ ->\n z_render:growl_error(?__("Enter an email address.", Context), Context)\n end.\n<\/code><\/pre>\nZotonic's submit pipeline runs the attached validators before calling the handler. This example checks input and shows feedback; it does not store an address or send mail. Do not treat validation as permission to subscribe or email someone. Check missing, malformed, and valid addresses, and also reject invalid input in any API that calls the same domain operation.<\/p>\n
Handle a postback on the server<\/h2>\n
Use the active Garden module as the delegate. Add this header, export, and callback to mod_garden.erl<\/code>, merging with declarations and event clauses already present:<\/p>\n-include_lib("zotonic_core\/include\/zotonic.hrl").\n-export([event\/2]).\n\n-spec event(Event, Context) -> z:context()\n when Event :: #postback{}, Context :: z:context().\nevent(#postback{message = {garden_hello, []}}, Context) ->\n z_render:growl(?__("Welcome to the garden", Context), Context).\n<\/code><\/pre>\nIn a page with the standard JavaScript includes, mod_wires<\/code>, and a final {% script %}<\/code>:<\/p>\n<button id="garden-hello" type="button">{_ Say hello _}<\/button>\n{% wire id="garden-hello" postback={garden_hello} delegate=`mod_garden` %}\n<\/code><\/pre>\nCompile and load the module, reload the page, and click the button. Expect the greeting notification. The returned context contains the queued browser response; returning the original context after another response call can lose that response.<\/p>\n
This public example changes no stored data. For a write, read only supported binary query keys, validate input, and authorize with the supplied context before calling a model. A signed postback does not make arbitrary form values trustworthy. A form submit delivers #submit{}<\/code>, not #postback{}<\/code>.<\/p>"}},"category_id":{"id":317,"is_a":["meta","category"],"name":"developerguide","title":"Developer guide","uri":"https:\/\/zotonic.com\/id\/developerguide"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:21Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"haspart":[],"hasreference":[1402,1539],"relation":[1539,2986],"subject":[2554,2563,2582,2622,2640]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/developer-guide\/forms-and-validation.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T20:45:37Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_developerguide_forms_and_validation","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:19Z","slug":"validate-a-form-on-both-sides","summary":{"_type":"trans","tr":{"en":"Use semantic form controls with labels and meaningful names. Add Zotonic validators for immediate feedback, then validate the submitted values again at the server boundary."}},"title":{"_type":"trans","tr":{"en":"Validate a form on both sides"}},"title_slug":{"_type":"trans","tr":{"en":"validate-a-form-on-both-sides"}},"tz":"UTC","uri":null,"version":44,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1419","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1419"}},"status":"ok"}