Remote form validation

Catalyst and ExtJS are my favourite frameworks for developing web applications. ExtJS provides a lot features to validate form data before the form is being submitted to the server. Everybody knows that you never should trust those values even if it was validated in the browser by ExtJS. Here is a comfortable way to validate form values remotely using Catalyst::Plugin::FormValidator::Simple.

The full example can be found on github:
git clone git://github.com/plu/rfv-example.git

• Create an ExtJS FormPanel:

      var win = new Ext.Window({
          .....
          ,items:[
              new Ext.FormPanel({
                  ,url:'[% Catalyst.uri_for('/save') %]'
                  ,id: 'fp'
                  .....
                  ,items: [{
                          fieldLabel: 'First name',
                          name: 'first',
                          anchor:'100%'
                      },{
                          fieldLabel: 'Last name',
                          name: 'last',
                          anchor:'100%'
                      },{
                          fieldLabel: 'Company',
                          name: 'company',
                          anchor:'100%'
                      },{
                          fieldLabel: 'eMail',
                          name: 'email',
                          anchor:'100%'
                      }
                  ]
  
                  ,buttons: [{
                      text: 'Save',
                      handler: function() {
                          win.findById('fp').getForm().submit();
                      }
                  }]
              })
          ]
      });
  

• Read validation results and modify form fields:

      var fp = win.findById('fp');
      fp.on('actioncomplete', function(a, fp) {
          var r = fp.result;
          for (var field in r.error) {
              fp.form.findField(field).markInvalid(
                  r.error[field].join("<br/>")
              );
          }
      });
  

• Validate form values:

  sub save : Global {
      my ( $self, $c ) = @_;
  
      $c->form(
          first   => [ qw/NOT_BLANK ASCII/ => [qw/LENGTH 2 20/] ],
          last    => [ qw/NOT_BLANK ASCII/ => [qw/LENGTH 2 20/] ],
          company => [ qw/NOT_BLANK ASCII/ => [qw/LENGTH 2 20/] ],
          email   => [qw/NOT_BLANK EMAIL_LOOSE/],
      );
  
      my $json : Stashed = {
          error   => $c->form->field_messages('save'),
      };
  }