{"id":427,"date":"2013-08-23T19:39:26","date_gmt":"2013-08-24T00:39:26","guid":{"rendered":"http:\/\/www.aibistin.com\/?p=427"},"modified":"2013-08-25T21:10:09","modified_gmt":"2013-08-26T02:10:09","slug":"creating-a-repeatable-address-form-with-htmlformhandler","status":"publish","type":"post","link":"https:\/\/www.aibistin.com\/?p=427","title":{"rendered":"Creating a Repeatable Address Form with HTML::FormHandler"},"content":{"rendered":"

\nThis is a summary of how I created a repeatable Address Form Module, Mover::Form::Travel::Matrix<\/a>, using HTML::FormHandler.<\/p>\n

\nAs part of my TravelTime Application<\/a> project I needed to create a form to enter multiple location addresses. I could construct the form manually using Template Toolkit, but I would still need to write my own validation and JavaScript to implement the multiple form requirement.
\nI could have used HTML::FormFU<\/a> I have used this previously(much to my regret) to build more complex forms. Not that HTML::FormFu isn’t useful. Once it is mastered it can be a great tool for building many types of complex forms. For me, I found that the learning curve was much too steep and the documentation was dispersed widely amongst many modules. I am sure that this has been improved in recent times, but I really don’t want to go back to pouring through reams of docs for this project.
\nSo I continued on my quest to use another behemoth of CPAN complexity just to make my life more difficult. I had wanted an excuse to experiment with HTML::Formhandler<\/a> and this seemed like a good time to do this. The documentation for this makes War And Peace seem like a side note on a shopping list. It must have taken longer to create than the Bible and hopefully will be less contentious. Seemingly it is the work of one developer by the name of Gerda Shank who must have locked herself away in a cave for a millennium to give the Pearl world this form framework.
\nWhat I like about HTML::FormHandler is that it seems much more Moose Like and intuitive to anybody who has worked with Moose. It seems very simple at first, however to get the best out of this, the learning curve is steep and requires time. So, say goodbye to family and social life while you get familiar with HTML::FormHandler.\n<\/p>\n

FormHandler Forms<\/p>\n

Mover::Form::Field::Address<\/span><\/p>\n

Before I make my repeatable address form, I created a form element for any US address using a FormHandler Moose Role. This is one of the many useful things about HTML::Formhandler. You can create many building blocks which can be used again and again. Here is the module on github Mover::Form::Field::Address<\/a>
\n<\/tad-larger>\n<\/p>\n

\r\n.....\r\n\r\nuse HTML::FormHandler::Types qw\/Zip Trim Collapse\/;\r\n\r\nhas_field 'address_1' => (\r\n    is      => 'rw', \r\n    isa     => Collapse, \r\n    required => 0,\r\n    message  => {\r\n        required => 'You must enter a street address!'\r\n    }\r\n);\r\nhas_field 'address_2' => (is => 'rw', isa => Collapse);\r\nhas_field 'city' => (is => 'rw', isa => Collapse);\r\nhas_field 'state' => ( type => 'Select', options_method => \\&_options_state );\r\nhas_field 'country' => (is => 'rw', isa => Collapse);\r\n#------ Create Zip Field Type\r\nhas_field 'zip' => ( is => 'rw',  isa => Zip);\r\n#------------------------------------------------------------------------------\r\n=head2 options_state\r\n  Builds the Options for US states. (NY New York,  AL Alabama etc).\r\n  Note: It does not include "DC". I may add DC later just as an alternative.\r\n=cut\r\n\r\nsub _options_state {\r\n\r\n    return (\r\n        'AL' => 'Alabama',\r\n        'AK' => 'Alaska',\r\n        'AZ' => 'Arizona',\r\n         ...\r\n        'WY' => 'Wyoming',\r\n    );\r\n\r\n}\r\n\r\nno HTML::FormHandler::Moose::Role;\r\n1;\r\n<\/pre>\n
\nWhen I initially created this Role, I had intended to manually validate the Zip Code field using Regexp::Common. I then found that FormHandler has a types Module <\/a>with some useful stuff in there, including a zip code. I will try this out instead. It also has types to trim off extra white space. How convenient.\n<\/p>\n
Mover::Form::Travel::Matrix<\/span><\/p>\n
\nThis is the actual HTML::FormHandler form, which has repeatable<\/tad-larger> Address elements. I also opted to include some of the convenient FormHandler Widgets that were created to make use of the Twitter Bootstrap CSS framework. There’s lots of stuff available with HTML::FormHandler.
\nThis module is available here on GitHub   Mover::Form::Travel::Matrix<\/a>
\n<\/tad-larger>\n<\/p>\n
\r\n\r\nhas '+field_name_space' => ( default => 'Mover::Form::Field' );\r\n \r\nhas '+name'        => ( default => $form_name );\r\n \r\nhas '+html_prefix' => ( default => 1 );\r\n \r\nhas '+is_html5'    => ( default => 1 );\r\n \r\nhas '+http_method' => ( default => $http_method );\r\n \r\nhas '+action'      => ( default => $form_action );\r\n\r\n#----- Mover::Form::Field::Address that is Repeatable\r\n \r\nhas_field 'addresses' => (\r\n    type         => 'Repeatable',\r\n    setup_for_js => 1,\r\n    do_wrapper   => 1,\r\n    tags         => { controls_div => 1 },\r\n    auto_id      => 1,\r\n);\r\n\r\nhas_field 'addresses.contains' => ( type => 'Address', );\r\n \r\nhas_field 'submit' => (\r\n    type         => 'Submit',\r\n    widget       => 'ButtonTag',\r\n    element_attr => { class => [ 'btn', $button_class, $button_size ] },\r\n    do_wrapper   => 0,\r\n    value        => 'Get Travel Time'\r\n);\r\n \r\nhas '+info_message'    => ( default => 'Starting point.' );\r\n \r\nhas '+success_message' => ( default => 'Form successfully submitted' );\r\n\r\nhas '+error_message'   => ( default => 'Please fix the errors on this form!' );\r\n<\/pre>\n
\nNow, we have a form with a repeatable address field and some fancy Bootstrap CSS, Yippee!
\nNext up is to create some templates to render the form pages. So, I will use the now familiar Template Toolkit<\/a> to do this.\n<\/p>\n
The Address Form Template<\/p>\n
travel_time.tt<\/span><\/p>\n
\r\n<!-- Travel Matrix Form -->\r\n<form name="[% tm_form.name %]" id="[% tm_form.name %]"\r\n  action="[% tm_form.action %]" method="[% tm_form.http_method %]"\r\n  class="form-vertical" >\r\n\r\n\r\n<fieldset >\r\n   <legend>\r\n      <p class="lead">\r\n         [%- \r\n             travel_time_heading \r\n             || 'Calculate Moving Truck Travel Time'\r\n         -%]\r\n      <\/p>\r\n   <\/legend>\r\n\r\n<!--  Start messages -->\r\n    <div id="messages">\r\n    <p class="text-success">[%- success_message -%]<\/p>\r\n    <p class="text-error">[%- error_message -%]<\/p>\r\n    <p class="text-warning">[%- warning_message -%]<\/p>\r\n    <p class="text-info">[%- info_message  -%]<\/p>\r\n    <\/div>\r\n<!-- End  messages -->\r\n\r\n    [% started_new_row  = 0  %]  [%# To specify how many Addresses per line %]\r\n    <!--- four to a line -->\r\n    [% FOREACH address_element IN tm_form.field('addresses').fields -%]\r\n        [%  IF ((loop.count == 1) || ((loop.count % 5) == 0))   %]\r\n\r\n          [% IF ( started_new_row == 1) %]\r\n              <!-- Close previous row before opening a new one. -->\r\n               <\/div> <!-- \/row-fluid -->\r\n          [%  END %]\r\n          <div class="row-fluid">\r\n          [% started_new_row  = 1 %]\r\n        [% END %]\r\n\r\n        <div class="span3 well">\r\n        \r\n          [% IF loop.first %]\r\n              <span class="text-info">\r\n                <abbr title='Calculations are based from a starting point in central New York City.'>\r\n                First Address\r\n                <\/abbr>\r\n              <\/span>\r\n          [% ELSIF loop.last  %] \r\n              <span class="text-info">\r\n                  <abbr title='The next version will have an option for more destination points.'>\r\n                  Last Address<\/abbr>\r\n              <\/span>\r\n\r\n          [% ELSE %]\r\n              <span class='text-info'>Address [% loop.count %]<\/span>\r\n          [% END %]\r\n          \r\n          [% address_element.render %]\r\n\r\n        <\/div> <!-- \/span3 -->\r\n    [% END %]\r\n\r\n    [% IF ( started_new_row == 1) %] [%# Close div tag at end of each row %]\r\n        <\/div> <!-- \/row-fluid -->\r\n        [% started_new_row  = 0 %]\r\n    [%  END %]\r\n\r\n\r\n\r\n<div class="row-fluid">\r\n    [% tm_form.field('submit').render %]\r\n<\/div> <!-- \/row-fluid -->\r\n<\/fieldset>\r\n<\/form>\r\n\r\n<\/div> <!-- \/row-fluid -->\r\n\r\n[% IF ( tm_form.is_valid) %]\r\n\r\n    [% IF (my_errors) %]\r\n        <div class="alert alert-error">\r\n        <span><b>[% error_message  || 'What a mess!' %]<\/b><\/span>\r\n        [%# One way to loop through a hash %]\r\n        [% FOREACH error IN my_errors.values %]\r\n         <span> [% error %]<\/span>\r\n         [% END %]\r\n        <\/div>\r\n    [%  END %]\r\n    \r\n[% ELSIF ( tm_form.errors) %]\r\n    <div class="alert alert-error row-fluid">\r\n        [% FOREACH error IN tm_form.errors -%]\r\n        <span class="span2">[% error %]<\/span>\r\n        [% END %]\r\n    <\/div>\r\n[%  END %]\r\n<\/pre>\n
\nThe source code for this template is available here<\/a>.
\nThere are many other ways to render a HTML::Formhandler<\/a> form, which you can explore in the CPAN documentation<\/a>.\n<\/p>\n
\nThere is much to explore in HTML::FormHandler and I am sure I will be using it again in future projects.\n<\/p>\n
\nFollow @aibistin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This is a summary of how I created a repeatable Address Form Module, Mover::Form::Travel::Matrix, using HTML::FormHandler. As part of my TravelTime Application project I needed to create a form to enter multiple location addresses. I could construct the form manually using Template Toolkit, but I would still need to write my own validation and JavaScript […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[21,23,12,20,22],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dancer2","tag-htmlformhandler","tag-moose","tag-perl","tag-templatetoolkit"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=427"}],"version-history":[{"count":9,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=\/wp\/v2\/posts\/427\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/www.aibistin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aibistin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}