Ruby sur rails: en utilisant des rails parselys

Question

J'essaie de valider les champs de saisie à l'aide d'une mesure. J'ai trouvé que si j'ajoute <form data-parsley-validate> ... </form>, aucun de mes boutons ne fonctionne, je ne peux donc pas naviguer (continuer à la page suivante).

Voici donc un exemple de ce que j'ai, et tout ce que je voudrais faire, c'est que cela soit nécessaire, et dans une plage 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>

Toute aide serait grandement appréciée. J'ai déjà le gemme installé, je pense avoir juste besoin de comprendre comment l'obtenir pour interagir avec le front-end.

Modifier. Une simple pas à pas pour obtenir des rails de persil, avec 1 exemple.

Je suis parti de ce projet pendant un court moment, puis est revenu et je l'ai eu pour travailler. Je voulais fournir rapidement un guide qui obtiendra le persil travailler pour des rails pour quelqu'un d'autre qui a besoin d'une réponse rapide.

Étape 1: Inclure les gemmes "Parsley-rails". Assurez-vous d'exécuter votre commande Bundle.

Étape 2: Inclure les CSS suivants, qui est juste du code de démarrage pour l'affichage des erreurs / succès.

actifs / feuilles de style / personnage.css.scss. / p>

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

Étape 3: Ajouter 'Data-Parsley-Validate' à vos formulaires.

Avant:

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

après:

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

Étape 4: Faites du champ requis.

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

Et c'est tout. J'espère que cela aidera quelqu'un d'autre à l'avenir.

Answer 1

Je suppose que vous utilisez la dernière version du gemme "Parsley-Rails" et avez besoin de persil dans votre fichier manifeste de pipeline d'actif, comme indiqué les instructions.

Tout d'abord, vous devez ajouter «Data-Parsley-Validate» à chaque formulaire, comme vous l'avez fait. J'utilise form_for et la syntaxe qui a fonctionné pour moi était:

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

Pour les champs que vous souhaitez valider, le Validateurs intégrés section de la La documentation est utile de vous montrer les différentes techniques de validation. Vous pouvez utiliser le validateur "plage" pour vérifier que les valeurs sont dans une plage donnée.

PARSLEY.JS prend en charge certains attributs HTML5 tels que "requis" en plus de sa propre liste. Voici un exemple de validation d'un champ de texte "Nom" est présent et au moins deux caractères de long, déclenchement de la validation sur flou:

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

Options de déclenchement Utilisez JQuery et la syntaxe est répertoriée dans la section "UI pour le champ" des documents.

Enfin, j'ai trouvé utile de consulter le Exemples fournis sur le site de Parsley.js . Assurez-vous que votre HTML généré correspond à sa syntaxe si vous ne voyez pas le comportement souhaité.