Starter App - Partie 4 - Enrichissons nos formulaires - Simple Form

Vers la partie précédente

Nous voici dans la quatrième partie de cette suite de tutoriels. Nous allons découvrir ici comment nous faciliter la création de formulaires en Ruby On Rails, notamment à l'aide de la gem simple_form. Pour ne pas avoir une partie trop longue, je vais la découper en deux. Dans celle-ci, nous verrons Simple Form sous toutes les coutures. Dans la suivante, nous verrons d'autres gems très utiles pour les formulaires : nested_form, client_side_validations + quelques petits bonus.

Les formulaires en Ruby On Rails

Simple Form

<%= semantic_form_for @article do |f| %>

    <%= f.inputs :name => "Basic" do %>

      <%= f.input :title %>

      <%= f.input :body %>

   <% end %>

   <%= f.submit %>

<% end %>

<form ...>

  <fieldset>

    <ol>

      <li ...><label ...>Title</label><input ...></li>

      <li ...><label ...>Body</label><input ...></li>

    </ol>

  </fieldset>

  <input type="submit" ...>

</form>

gem 'simple_form', '2.1.0.dev', :git => "git://github.com/plataformatec/simple_form.git", :branch => "v2.1"

$ rails generate simple_form:install --foundation

SimpleForm.setup do |config|

  config.wrappers :foundation, :class => :input, :hint_class => :field_with_hint, :error_class => :error do |b|

    b.use :html5

    b.use :placeholder

    b.use :maxlength

    b.use :pattern

    b.use :min_max

    b.use :readonly

    b.use :label_input

    b.use :error, :wrap_with => { :tag => :small }



    b.use :hint,  :wrap_with => { :tag => :span, :class => :hint }

  end



  ...

end

De quoi expérimenter Simple Form

$ rails g scaffold Address street_number:integer postal_code:string street:string city:string country:string area:string other_information:text building:string company:boolean company_name:string

$ rails g scaffold UserDatasheet phone:string mobile:string title:string birthdate:date firstname:string lastname:string nickname:string 

create_table :addresses do |t|

      t.integer :street_number, :null => false

      t.string :postal_code,    :null => false, :limit => 50

      t.string :street,         :null => false

      t.string :city,           :null => false, :limit => 60

      t.string :country,        :null => false, :limit => 80

      t.string :area

      t.text :other_information

      t.string :building

      t.boolean :company,       :null => false, :default => false

      t.string :company_name

      t.timestamps

    end

create_table :user_datasheets do |t|

      t.string :phone,      :limit => 40

      t.string :mobile,     :limit => 40

      t.string :title,      :null => false

      t.date :birthdate    

      t.string :firstname,  :limit => 40

      t.string :lastname,   :limit => 40

      t.string :nickname,   :null => false, :limit => 80

      t.timestamps

    end

Il est bon d'utiliser :limit lorsque c'est possible. Par défaut, une donnée string est limitée à 255 caractères. La plupart du temps vous n'aurez pas besoin d'autant de caractères. Prévoyez tout de même un peu large histoire d'être paré à toutes possibilités exotiques. En général, je m'amuse à chercher sur le web les "Noms les plus longs" ou "Noms des villes les plus longs" du monde et j'arrondis la taille de ces noms exotiques à la dizaine supérieure. Cela laisse de la marge à votre application et évitera que le nom de certains utilisateurs soit refusé tout en optimisant votre application. (Et puis, cela ajoute également un tantinet de sécurité, car vous laissez moins de marge de manœuvre aux pirates pour insérer du code malveillant dans votre base de données.)

Évidemment, n'oubliez jamais de répercuter les restrictions définies dans vos fichiers migrations au sein de validations dans vos models, pour que vos utilisateurs n'aient pas de mauvaises surprises.

$ rake db:migrate

$ annotate

$ magic_encoding

A la découverte de Simple Form

# Gemfile

gem country_select

$ bundle install

# fichier locales/fr/models.fr.yml

fr:

  activerecord:

    models:

      address:

        one: "Adresse"

        other: "Adresses"

    attributes:

      address: 

        country: "Pays"

        street_number: "Numéro de rue"

        street: "Rue"

        city: "Ville"

        area: "Zone et/ou Département"

        other_information: "Autres informations"

        building: "Bâtiment"

        company: "S'agit-il d'une société ?"

        company_name: "Nom de la société"

# fichier locales/fr/simple_form.fr.yml

fr:

  simple_form:

    "yes": 'Oui'

    "no": 'Non'

    required:

      text: 'requis'

      mark: '*'

      html: '<abbr title="requis">**</abbr>'

    error_notification:

      default_message: "Merci de corriger les erreurs signalées:"

    labels:

      defaults:

        country: "Votre pays de résidence"

        building: "Code bâtiment"

      address:

        street_number: "N°"

        building: "Code de votre bâtiment"

    hints:

      defaults:

        building: 'Exemple: Bâtiment 2A'

        street_number: 'Uniquement le numéro de rue'

<form id="new_address" class="simple_form new_address" novalidate="novalidate" method="post" action="/addresses" accept-charset="UTF-8">

  <div style="margin:0;padding:0;display:inline">...</div>

  <div class="form-inputs">

    <div class="input integer optional address_street_number field_with_hint">

      <label class="integer optional control-label" for="address_street_number">N°</label>

      <input id="address_street_number" class="numeric integer optional" type="number" step="1" name="address[street_number]">

      <span class="hint">Uniquement le numéro de rue</span>

    </div>

    <div class="input string optional address_postal_code">...</div>

    <div class="input string optional address_street">...</div>

    <div class="input string optional address_city">...</div>

    <div class="input country optional address_country">...</div>

    <div class="input string optional address_area">...</div>

      <label class="string optional control-label" for="address_area">Zone et/ou Département</label>

      <input id="address_area" class="string optional" type="text" size="50" name="address[area]" maxlength="255">

    </div>

  </div>

  <div class="form-actions">

    <input class="button" type="submit" value="Create Adresse" name="commit">

  </div>

</form>

# Fichier address.rb

attr_accessible :building_password, [...]attr_accessor :building_password

<%= f.input :building_password %>

<div class="input password optional address_building_password">

  <label class="password optional control-label" for="address_building_password">Building password</label>

  <input id="address_building_password" class="password optional" type="password" size="50" name="address[building_password]">

</div>

Apprenons à utiliser Simple Form

<%= f.input :postal_code, :label => "Code postal", :label_html => { :style => "font-weight:bold;"} %>

<%= f.input :postal_code, :label => "Code postal", :label_html => { :class => "bold"} %>

<%= f.input :city, :label => false, :placeholder => "Votre ville" %>

<%= f.input :country, :label => false, :hint => "Votre pays" %>

<%= f.input :street_number, :hint => false,

    		:input_html => { :maxlength => 5, :size => 3 }, 

    		:wrapper_html => { :style => "float: left;"} %>

    <%= f.input :street, :label => false, :hint => "Libellé de votre rue, ex: Chemin des bois du loup",

    		:error_html => { :style => "border: 2px red solid;" } %>

<%= f.input :area, :input_html => {:value => "Quelque part dans le monde" }, :disabled => true %>

<%= f.input :company, :input_html => {:checked => true} %>

# Model UserDatasheet

  TITLES = ["M.", "Mme.", "Mlle."]  

  phone_regex = /\(?([0-9]+)\)?([ .-]?)([0-9]+)\2([0-9]+)/

  

  validates :phone,   :format => { :with => phone_regex, :message => "n'est pas un numéro de téléphone valide" }

  validates :mobile,  :format => { :with => phone_regex, :message => "n'est pas un numéro de téléphone valide" }

  validates :nickname, :length => {:maximum => 80 }

  validates :firstname, :length => { :within => 2..40 }

  validates :lastname, :length => {:within => 2..40}

  validates :title, :inclusion => {:in => TITLES }

# Model Address

  validates :street_number,     :presence => true, :numericality => { :greater_than_or_equal_to => 1 }

  validates :street,            :presence => true, :length => { :within => 5..255 }

  validates :postal_code,       :presence => true, :length => { :within => 2..50 }

  validates :city,              :presence => true, :length => { :within => 2..60 }

  validates :other_information, :length => { :maximum => 500 }

  validates :country,           :presence => true, :length => { :maximum => 60 }

  validates :area,              :presence => true, :length => { :within => 2..255 }

<%= f.input :birthdate, :as => :date, start_year: Date.today.year - 90,

                              end_year: Date.today.year - 12,

                              order: [:day, :month, :year] %>

Remarque : Une fois la page rafraîchie, vous avez peut-être des options bizarres pour le choix des mois. Si c'est le cas, veuillez m'excuser, c'est que j'ai oublié de vous faire installer les traductions de Ruby On Rails par défaut. Pour les utiliser, rien de plus simple, ajoutez la gem rails-i18n à votre Gemfile, installez-la avec bundle install et relancez votre serveur. Et voilà, vous avez les mois en français !

<%= f.input :title, :collection => UserDatasheet::TITLES, :as => :radio_buttons %>

<input type="tel" size="40" pattern="\(?([0-9]+)\)?([ .-]?)([0-9]+)\2([0-9]+)" name="user_datasheet[phone]" maxlength="40" id="user_datasheet_phone" class="string tel optional">

Petits bonus

gem "i18n_country_select" # https://github.com/onomojo/i18n_country_select

gem 'i18n-country-translations' # https://github.com/onomojo/i18n-country-translations

La class PriorityInput est utilisée par SimpleForm pour deux champs particuliers contenant le mot country ou time_zone. Ces deux champs s'utilisent conjointement avec les configurations config.time_zone_priority et config.country_priority permettant de mettre en avant un certain pays ou une certaine zone de temps au sein des listes de choix. Nous allons respecter cette logique et éviter de tout casser en utilisant un simple test.

# app/inputs/priority_input.rb

class PriorityInput < SimpleForm::Inputs::priorityInput 

  def input

    if input_type.to_s == "country"

      @builder.send(:"#{input_type}_code_select", attribute_name, input_priority,

                      input_options, input_html_options)

    else

      super

    end 

  end

end

<% # Au sein de notre formulaire pour l'adresse : %>

<%= f.input :country, :priority => [[ 'United States', 'US' ], [ 'Canada', 'CA' ], ['France', 'FR']] %> 

# Ou directement dans le fichier de configuration de simple_form.rb : 

config.country_priority = [[ 'United States', 'US' ], [ 'Canada', 'CA' ], ['France', 'FR']]

<%= t(@address.country, :scope => :countries) %>

# -*- encoding : utf-8 -*-

# Validation des numéros de téléphone

class PhoneValidator < ActiveModel::EachValidator

  def validate_each(record, attribute, value)

    unless value =~ /\(?([0-9]+)\)?([ .-]?)([0-9]+)\2([0-9]+)/

      record.errors.add(attribute, :not_a_phone)

    end

  end

end

fr:

  errors: 

    messages: 

      not_a_phone: "n'est pas un numéro de téléphone valide"

  validates :phone,   :phone => true

  validates :mobile,  :phone => true

# -*- encoding : utf-8 -*-

# fichier email_validator.rb, pour valider les emails sans utiliser de regex, grâce à la gem mail

# Je l'ai récupéré depuis un Ghist sur GitHub, je ne saurais plus donner le lien par contre...

require 'mail'



# Code récupéré depuis un blog, très efficace pour tester les adresses mails, 

# Egalement non basé sur le regex donc plus probant

class EmailValidator < ActiveModel::EachValidator

  def validate_each(record,attribute,value)

    begin

      m = Mail::Address.new(value)

      # We must check that value contains a domain and that value is an email address

      r = m.domain && m.address == value

      t = m.__send__(:tree)

      # We need to dig into treetop

      # A valid domain must have dot_atom_text elements size > 1

      # user@localhost is excluded

      # treetop must respond to domain

      # We exclude valid email values like <user@localhost.com>

      # Hence we use m.__send__(tree).domain

      r &&= (t.domain.dot_atom_text.elements.size > 1)

    rescue Exception => e   

      r = false

    end

    record.errors[attribute] << (options[:message] || "is invalid") unless r

  end

end

# -*- encoding : utf-8 -*-

# fichier word_validator.rb

# Permet de valider un mot, regardant d'abord s'il s'agit bien d'un mot (i.e. ne contenant aucun caractère alpha numérique)

# puis confrontant ce mot à un dictionnaire français enregistré dans la base de données si l'option : :dictionnary => true est activée 

# Par exemple : validates :french_word, :word => { :dictionnary => true, :language => "fr" }



class WordValidator < ActiveModel::EachValidator

  def validate_each(record, attribute, value)

    unless value =~ /\A[[:alpha:]'-]+\z/i

      record.errors.add(attribute, :not_a_word)

    end

    if options[:dictionnary] == true && !options[:language].blank?

      if Dictionnary.where(:language => options[:language]).find_by_word(value.clean_word).nil?

        record.errors.add(:attribute, :not_a_dictionnary_word)

      end

    end

  end

end

Index -- Article précédent: 3 conseils pour étoffer les descriptions de ses produits -- Article suivant: Shirteens

• 
• ruby on rails
• starter app
• tutoriel