Quantcast
Channel: jésus lopes » inputs
Viewing all articles
Browse latest Browse all 2

Utilizando Formtastic e Inputs

$
0
0

Alguns meses atrás escrevi um plugin chamado Inputs. Como pode ser lido neste post, o objetivo é facilitar a criação de máscaras em campos de formulário.

Após ter descoberto o Formtastic, passei a utilizar o mesmo em todos os projetos aqui na Zigotto. Gosto muito da maneira que ele me permite trabalhar e escrever o código mais limpo e organizado.

E com tudo isso, comecei a me perguntar:

  • O Inputs pode ser utlizado junto com o Formtastic?
  • Como unir os dois de uma maneira bem simples e continuar usando o Formtastic para trabalhar com os formulários?

Imaginei algo como:

<% semantic_form_for @product do |form| %>
  <%= form.input :price, :mask => :decimal %>
  <%= form.commit_button %>
<% end %>

Gostei! É exatamente isso que eu quero! :)

Inputs foi atualizado e agora é possível através da opção :mask informar qual o tipo de máscara que você quer inserir no campo do formulário!

Como usar?

  1. Instale e configure o Formtastic em seu projeto. Veja como fazer isso aqui.
  2. Instale e configure o plugin Inputs. Veja como fazer isso aqui.

Após tudo configurado, é possível se fazer isso:

<% semantic_form_for @customer do |form| %>
  <%= form.input :name %>
  <%= form.input :phone, :mask => :phone %>
  <%= form.input :cpf, :mask => :cpf %>
  <%= form.commit_button %>
<% end %>

Você pode utlizar outras máscaras já definidas:

  • phone
  • phone-us
  • cpf
  • cnpj
  • date
  • date-us
  • cep
  • time
  • cc
  • integer
  • decimal
  • decimal-us
  • signed-decimal-us

ou criar a sua própria máscara:

<% semantic_form_for @product do |form| %>
  <%= form.input :year, :mask => '9999' %>
  <%= form.input :phone, :mask => '99-9999-9999' %>
  <%= form.commit_button %>
<% end %>

Inputs utiliza o plugin meioMask para criar as máscaras, demais opções e configurações podem ser vista na própria página do meioMask.

Sugestões, criticas são bem vindas. O código esta no Github, fiquem a vontade para utilizar, modificar e compartilhar :)


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles



Latest Images