Ruby on Rails:Usando Parsely-Rails

Question

Eu estou tentando validar campos de entrada usando Parsely.Eu descobri é que se eu adicionar <form data-parsley-validate> ... </form> nenhum dos meus botões o trabalho, então eu não posso navegar (continuar para a próxima página).

Então aqui está um exemplo do que eu tenho, e tudo o que eu gostaria de fazer é torná-lo necessário, e dentro de um intervalo de 100-350.

<form data-parsley-validate>
  <ol>
<li>
  <p>
    <div class="measure_question">
          <b>Weight</b><i>(pounds):</i>
        </div> 
    <div class="measure_answer">
          <%= text_field(:baseline, :base_weight, :style => "width:100px;") %>
        </div> 
  </p>
</li>    
  </ol>
</form>

Qualquer ajuda seria muito apreciada.Eu já tenho o gem instalado, eu acho que eu só preciso descobrir como levá-lo para interagir com o front-end.

EDITAR.Um simples passo a passo para obter a Salsa-de Trilhos de trabalho, com 1 exemplo.

Eu andei para longe deste projeto por um curto período de tempo e, então, voltou e tenho que trabalhar.Eu queria rapidamente fornecer um guia que irá obter com a Salsa de trabalho para o rails, para alguém que precisa de uma resposta rápida.

Passo 1: Incluir a gem "salsa-rails".Certifique-se de executar o pacote de comando.

Passo 2: Incluir o seguinte CSS, que é apenas alguns starter código para a exibição de erros/acertos.

assets/stylesheets/personalizado.css.escs

/* Parsley */

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in-;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

Passo 3: Adicionar dados-salsa-validar " para seus formulários.

Antes:

<%= form_for @your_form do |f| %>

Depois:

<%= form_for @your_form, html: {"data-parsley-validate" => ''} do |f| %>

Passo 4: Fazer algum campo obrigatório.

<%= text_field(:your_table, :weight_variable, :style => "width:100px;", :required => '') %>

E é isso.Espero que isso ajude alguém no futuro.

Answer 1

Eu estou supondo que você esteja usando a versão mais recente da "salsa-rails" de gema, e ter exigido salsa no seu asset pipeline arquivo de manifesto, como as instruções dizem.

Primeiro, você precisa adicionar dados-salsa-validar " para cada formulário, como você tem feito.Eu estou usando o form_for, e a sintaxe que funcionou para mim foi:

<%= form_for @user, html: { 'data-parsley-validate' => '' } do |f| %>

Para os campos que você deseja validado, o Construído-em Validadores seção de documentação é útil para mostrar as diferentes técnicas para validação.Você pode usar o "intervalo" validador para verificar se os valores estão dentro de um determinado intervalo.

Parsley.js suporta alguns atributos HTML5, tais como o "necessário" para além da própria lista.Aqui está um exemplo de como validar que um "nome" campo de texto está presente e pelo menos dois caracteres, provocando a validação de desfoque:

<%= f.text_field :name, required: true, 'data-parsley-minlength' => '2', 'data-parsley-trigger' => 'blur' %>

Opções de disparo usar o jQuery, e a sintaxe é listado em "INTERFACE de utilizador para o campo" seção do docs.

Por fim, eu achei úteis para verificar o exemplos desde o Parsley.js o site.Certifique-se de que o seu HTML gerado corresponde a sua sintaxe se você não estiver vendo o comportamento desejado.