Rubino su rotaie: usando parsely-rotaie

Question

Sto provando a convalidare i campi di input usando in modo fensitivo. Ho capito che se aggiungo <form data-parsley-validate> ... </form> nessuno dei miei pulsanti funziona così non posso navigare (continua alla pagina successiva).

Quindi ecco un esempio di ciò che ho, e tutto ciò che mi piacerebbe fare è renderlo richiesto e all'interno di un intervallo di 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>

.

Qualsiasi aiuto sarebbe molto apprezzato. Ho già installato la gemma, penso di aver solo bisogno di capire come ottenerlo per interagire con il front-end.

modifica. Una semplice procedura dettagliata per far funzionare i binari di prezzemolo, con 1 esempio.

Sono andato via da questo progetto per un breve periodo, poi è tornato e lo ha lavorato. Volevo fornire rapidamente una guida che otterrà il prezzemolo che lavora per le rotaie per chiunque altro abbia bisogno di una risposta rapida.

Step 1: Includi la Gem "Parsley-Rails". Assicurati di eseguire il tuo comando Bundle.

Step 2: Includi il seguente CSS, che è solo un codice di avviamento per la visualizzazione di errori / successi.

Attività / fogli di fogli di stili / custom.css.SCSS

/* 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;
}

.

Step 3: Aggiungi 'Data-prezzestelle-Validate' ai tuoi moduli.

Prima:

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

.

dopo:

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

.

Step 4: crea un campo richiesto.

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

.

E questo è tutto. Spero che questo aiuti qualcun altro in futuro.

Answer 1

Suppongo che tu stia usando l'ultima versione del gemma "Parsley-Rails" e hanno richiesto il prezzemolo nel file manifest del tuo condotto di asset, poiché le istruzioni dicono.

In primo luogo, è necessario aggiungere "Data-prezzestella-Validate" a ciascun modulo, come hai fatto. Sto usando Form_for e la sintassi che ha funzionato per me era:

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

.

Per i campi che si desidera convalidati, Validators integrato Sezione del La documentazione è utile per mostrarti le diverse tecniche per la convalida. È possibile utilizzare il validatore "Range" per verificare che i valori siano entro un determinato intervallo.

prezzemolo.js supporta alcuni attributi HTML5 come "Richiesto" in aggiunta alla sua lista. Ecco un esempio di come convalidare che è presente un campo di testo "Nome" e almeno due caratteri, innescando la convalida sulla sfocatura:

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

.

Opzioni di trigger Utilizzare JQuery e la sintassi è elencata nella sezione "UI per campo" dei documenti.

Infine, ho trovato utile controllare il esempi fornito sul sito di prezzemolo.js . Assicurarsi che il tuo HTML generato corrisponda alla sua sintassi se non stai vedendo il comportamento desiderato.