Mise en place vue html message d'erreur de cette façon?

Question

J'utilise Twitter Bootstrap- et que vous voulez générer le code html correct pour afficher la vue d'erreur comment il le fait sur le site principal, qui est:

Le code HTML pour le champ ci-dessus est:

<div class="control-group error">
 <label for="inputError" class="control-label">Input with error</label>
  <div class="controls">
   <input type="text" id="inputError">
  </div>
</div>

Note: Je supprimé Please correct the error, <span>, je veux juste le champ de saisie et de l'étiquette

.

Et si je devais utiliser mon page d'inscription à titre d'exemple, le champ email, ce serait:

<div class="control-group">
 <label for="user_email" class="control-label">Email*</label>
  <div class="controls">
   <input type="email" value="" name="user[email]" id="user_email" class="span3">
  </div>
</div>

Que dois-je faire pour obtenir de fonctionner comme l'ancien?

Answer 1

Ne pas réinventer la roue. Utilisez simple_form . La version actuelle de la gemme vous permet de faire ce qui suit:

rails generate simple_form:install --bootstrap

Avec cela, vous pouvez utiliser les aides simple_form. Ils généreront les bonnes choses pour vous.

Answer 2

Je viens de rencontré ce problème et ont fixé avec une simple modification du CSS Bootstrap.

Mon code habituel de champ est:

<div class="control-group">
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
    <div class="controls">
        <%= f.text_field :fieldname, :class => 'input-large' %>
    </div>
</div>

Depuis que je suis en utilisant f.label et f.text_field l'étiquette et l'entrée sont à la fois encapsulée avec divs avec la classe field_with_errors (comme Nicholas mentionne), ce qui rend le résultat HTML:

<div class="control-group">
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
    <div class="controls">
        <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
    </div>
</div>

Pour ceux-ci ont la même apparence que le regard style <div class="control-group error"> de Bootstrap ajouter des sélecteurs supplémentaires dans bootstrap.css. Je trouve toutes les références à .control-group.error ... et ajouter des lignes en double avec .control-group .field_with_errors .... Donc, je me retrouve avec ce genre de chose:

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
  color: #b94a48;
}

Il pourrait ne pas être la manière la plus élégante de le faire pour Rails, mais pour moi, il semblait beaucoup plus facile que les pierres précieuses plus dépendantes ou remplaçant le traitement d'erreur. Oui, vous devrez apporter les mêmes modifications à chaque fois que vous mettez à jour Bootstrap, mais ils sont assez simples changements, et vous pourriez probablement faire un fichier de patch pour le faire automatiquement.

Answer 3

Rails génère automatiquement un div avec la field_with_errors de classe lorsqu'un message d'erreur apparaît. Cette div enveloppe l'élément avec l'erreur. Pour le personnaliser, vous pouvez ajouter cette ligne à application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }

Ceci est la valeur par défaut, donc afin d'obtenir la même structure que Twitter Bootstrap, vous pouvez jouer avec.

html_tag est un espace réservé pour le champ avec des erreurs, par exemple, <input name="model[attribute]" size="30" type="text" value="">

Vous pouvez envelopper cela dans une autre div, et également ajouter une durée disant: « S'il vous plaît corriger l'erreur ».

Plus d'infos: http://guides.rubyonrails.org/configuring. html - point 3.9