Rails 3: l'encapsuleur «champ avec erreurs» modifie l'apparence de la page. Comment éviter cela?

Champ Email:

<label for="job_client_email">Email: </label> 
<input type="email" name="job[client_email]" id="job_client_email">

ressemble à ça:

Mais, si la validation de l'e-mail échoue, cela devient:

<div class="field_with_errors">
  <label for="job_client_email">Email: </label>
</div> 
<div class="field_with_errors">
  <input type="email" value="wrong email" name="job[client_email]" id="job_client_email">
</div>

qui ressemble à ceci:

Comment éviter ce changement d'apparence?

Vous devriez passer outre ActionView::Base.field_error_proc. Il est actuellement défini comme ceci dans ActionView::Base:

 @@field_error_proc = Proc.new{ |html_tag, instance| 
   "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
 }

Vous pouvez le remplacer en le mettant dans la classe de votre application à l'intérieur config/application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  html_tag
}

Redémarrez le serveur rails pour que cette modification prenne effet.

La différence visuelle que vous voyez se produit parce que l' divélément est un élément de bloc. Ajoutez ce style à votre fichier CSS pour qu'il se comporte comme un élément en ligne:

.field_with_errors { display: inline; }

J'utilise actuellement cette solution, placée dans un initialiseur:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  class_attr_index = html_tag.index 'class="'

  if class_attr_index
    html_tag.insert class_attr_index+7, 'error '
  else
    html_tag.insert html_tag.index('>'), ' class="error"'
  end
end

Cela me permet simplement d'ajouter un nom de classe à la balise appropriée, sans créer d'éléments supplémentaires.

Le code supplémentaire est ajouté par ActionView::Base.field_error_proc. Si vous n'utilisez pas field_with_errorspour styliser votre formulaire, vous pouvez le remplacer dans application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }

Vous pouvez également le changer en quelque chose qui convient à votre interface utilisateur:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class='field_with_errors'>#{html_tag}</span>".html_safe }

Je travaille avec Rails 5 et Materialise-Sass et j'obtiens des problèmes avec le comportement par défaut de Rails pour traiter les validations de champ ayant échoué comme dans l'image ci-dessous et c'était à cause du supplément divajouté aux champs de saisie où la validation a échoué.

Travailler avec @Phobetron answer et modifier la réponse d'Hugo Demiglio aussi. J'ai apporté quelques ajustements à ces blocs de code et j'obtiens quelque chose qui fonctionne bien dans les cas suivants:

• Si les deux inputet labelont leur propre classattribut n'importe où
  • <input type="my-field" class="control">
  • <label class="active" for="...">My field</label>
• Si les balises inputou labeln'ont pas d' classattribut
  • <input type="my-field">
  • <label for="...">My field</label>
• si la labelbalise a une autre balise à l'intérieur avec leclass attribute
  • <label for="..."><i class="icon-name"></i>My field</label>

Dans tous ces cas, la errorclasse sera ajoutée aux classes existantes dans l' classattribut si elles existent ou elle sera créée si elle n'est pas présente dans l' étiquette ou les balises d' entrée .

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
    class_attr_index = html_tag.index('class="')
    first_tag_end_index = html_tag.index('>')

    # Just to inspect variables in the console
    puts '😎 ' * 50
    pp(html_tag)
    pp(class_attr_index)
    pp(first_tag_end_index)

    if class_attr_index.nil? || class_attr_index > first_tag_end_index
        html_tag.insert(first_tag_end_index, ' class="error"')
    else
        html_tag.insert(class_attr_index + 7, 'error ')
    end

    # Just to see resulting tag in the console
    pp(html_tag)
end

J'espère que cela pourrait être utile pour quelqu'un avec les mêmes conditions que moi.

En plus de @phobetron answer, qui ne fonctionne pas lorsque vous avez une autre balise avec un attribut de classe, comme <label for="..."><i class="icon my-icon"></i>My field</label>.

J'ai fait quelques changements sur sa solution:

# config/initializers/field_with_error.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  class_attr_index = html_tag.index('class="')
  first_tag_end_index = html_tag.index('>')

  if class_attr_index.nil? || first_tag_end_index > class_attr_index
    html_tag.insert(class_attr_index + 7, 'error ')
  else
    html_tag.insert(first_tag_end_index, ' class="error"')
  end
end

Si pour une raison quelconque vous travaillez toujours sur Rails 2 (comme moi), consultez le message SO ici .

Il propose un script à mettre dans les initialiseurs.

Une chose à garder à l'esprit (comme je l'ai découvert aujourd'hui) est que si vous faites flotter soit l'étiquette, soit les champs d'entrée (je fais flotter tous les champs d'entrée à droite), le css se cassera même si vous remplacez ActionView :: Base.field_error_proc.

Une alternative consiste à abaisser un niveau plus profond dans le formatage CSS comme ceci:

.field_with_errors label {
  padding: 2px;
  background-color: red;
}

.field_with_errors input[type="text"] {
  padding: 3px 2px;
  border: 2px solid red;
}

J'ai fait une option pour désactiver cette chose terrible pour certains objets

# config/initializers/field_error_proc.rb

module ActiveModel::Conversion
  attr_accessor :skip_field_error_wrapper
end

ActionView::Base.field_error_proc = Proc.new {|html_tag, instance|
  if instance.object && instance.object.skip_field_error_wrapper
    html_tag.html_safe
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
}

Alors peut l'utiliser comme ceci:

@user.skip_field_error_wrapper = true
form_for(@user) do |f|
  ...
end

C'est ma solution qui s'ajoute à la réponse de @ Phobetron. En plaçant ce code dans application.rb, vos balises <p>et <span>générées par les form.error :pappels correspondants recevront la fields_with_errorsbalise css. Le reste recevra la errorclasse CSS.

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
  class_attr_index = html_tag.index 'class="'

  if class_attr_index
    # target only p's and span's with class error already there
    error_class = if html_tag =~ /^<(p|span).*error/
      'field_with_errors '
    else
      'error '
    end

    html_tag.insert class_attr_index + 7, error_class
  else
    html_tag.insert html_tag.index('>'), ' class="error"'
  end
}

J'ai trouvé de cette façon la plus flexible et la plus discrète de toutes les précédentes pour styliser la réponse sur mes formulaires.

Si c'est juste à des fins de style (cela ne vous dérange pas div), vous pouvez simplement ajouter ceci à votre css:

div.field_with_errors {
 display: inline;
}

Le divagira comme un spanet il ne sera pas interférer avec votre conception (depuis divest un élément de bloc - display: block;- par défaut, il provoquera une nouvelle ligne après sa fermeture, spanest inline, donc il ne fonctionne pas).

Si vous souhaitez simplement désactiver les erreurs pour certains éléments, par exemple les cases à cocher , vous pouvez le faire:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  doc = Nokogiri::HTML::Document.parse(html_tag)
  if doc.xpath("//*[@type='checkbox']").any?
    html_tag
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
end

S'il ne s'agit que de problèmes de style, nous pouvons écraser "field_with_errors". Mais comme cela pourrait affecter d'autres formulaires dans notre application, il est préférable d'écraser la classe "field_with_errors" par sous cette forme uniquement.

Considérant que 'parent_class' est l'une des classes parentes du champ d'erreur du formulaire (soit la classe du formulaire, soit la classe de l'un des éléments parent du champ d'erreur), alors

  .parent_class .field_with_errors {
    display: inline;
  }

Cela résoudra le problème et ne perturbera pas non plus les autres formulaires de notre application.

OU

Si nous devons remplacer le style de "field_with_errors" pour toute l'application, alors comme @dontangg l'a dit,

.field_with_errors { display: inline; } 

fera le correctif. J'espère que ça aide :)

Si vous ne voulez pas changer field_error_procpour l'ensemble de votre application, le dépliage de jQuery peut fournir une solution plus ciblée pour des problèmes spécifiques, par exemple,

$('FORM .field_with_errors > INPUT[type="checkbox"]').unwrap();