Rails 3: o invólucro "campo com erros" altera a aparência da página. Como evitar isso?

E-mail:

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

se parece com isso:

Mas, se a validação do email falhar, ela se tornará:

<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>

que se parece com isso:

Como eu poderia evitar essa mudança de aparência?

Você deve substituir ActionView::Base.field_error_proc. Atualmente, é definido como este em ActionView::Base:

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

Você pode substituí-lo colocando isso na classe do seu aplicativo dentro config/application.rb:

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

Reinicie o servidor rails para que essa alteração entre em vigor.

A diferença visual que você está vendo está acontecendo porque o divelemento é um elemento de bloco. Adicione este estilo ao seu arquivo CSS para que ele se comporte como um elemento embutido:

.field_with_errors { display: inline; }

Atualmente, uso esta solução, colocada em um inicializador:

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

Isso me permite apenas adicionar um nome de classe à tag apropriada, sem criar elementos adicionais.

O código extra está sendo adicionado por ActionView::Base.field_error_proc. Se você não estiver usando field_with_errorspara estilizar seu formulário, poderá substituí-lo em application.rb:

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

Como alternativa, você pode alterá-lo para algo adequado à sua interface do usuário:

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

Estou trabalhando com o Rails 5 e o Materialize-Sass e estou tendo alguns problemas com o comportamento padrão do Rails para tratar validações de campo com falha, como na imagem abaixo, e foi por causa do acréscimo divadicionado aos campos de entrada em que a validação falhou.

Trabalhando com a resposta @Phobetron e modificando a resposta de Hugo Demiglio também. Fiz alguns ajustes nesses blocos de código e recebo algo funcionando bem nos seguintes casos:

• Se ambos inpute labeltiver seu próprio classatributo em qualquer lugar
  • <input type="my-field" class="control">
  • <label class="active" for="...">My field</label>
• Se as tags inputou labelnão tiverem um classatributo
  • <input type="my-field">
  • <label for="...">My field</label>
• se a labeltag tiver outra tag dentro com oclass attribute
  • <label for="..."><i class="icon-name"></i>My field</label>

Em todos esses casos, a errorclasse será adicionada às classes existentes no classatributo, se existir, ou será criada se não estiver presente no rótulo ou nas tags de entrada .

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

Espero que possa ser útil para alguém com as mesmas condições que eu.

Além da resposta @phobetron, que não funciona quando você tem outra tag com o atributo class, como <label for="..."><i class="icon my-icon"></i>My field</label>.

Eu fiz algumas mudanças em sua solução:

# 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

Se, por algum motivo, você ainda estiver trabalhando no Rails 2 (como eu sou), confira o post aqui .

Ele oferece um script para colocar inicializadores.

Uma coisa a ter em mente (como eu descobri trabalhando nisso hoje) é que, se você flutuar nos campos label ou de entrada (estou flutuando todos os campos de entrada corretamente), o css será quebrado mesmo se você substituir o ActionView :: Base.field_error_proc.

Uma alternativa é reduzir um nível mais profundo na formatação CSS da seguinte forma:

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

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

Eu fiz uma opção para desativar essa coisa terrível para alguns objetos

# 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
}

Então, pode usá-lo assim:

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

Esta é a minha solução baseada na resposta do @ Phobetron. Ao inserir esse código application.rb, suas tags <p>e <span>geradas pelas form.error :pchamadas correspondentes receberão a fields_with_errorstag css. O restante receberá a 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
}

Achei assim o mais flexível e discreto de todos os anteriores para modelar a resposta em meus formulários.

Se for apenas para fins de estilo (você não se importa div), basta adicionar isso ao seu css:

div.field_with_errors {
 display: inline;
}

Ele divfuncionará como um spane não interferirá no seu design (já que divé um elemento de bloco - display: block;- por padrão, causará uma nova linha após o fechamento; spané inline, portanto, não).

Se você quiser apenas desativar os erros de certos elementos, por exemplo , caixas de seleção , faça o seguinte:

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

Se for apenas sobre problemas de estilo, podemos substituir "field_with_errors". Mas como isso pode afetar outros formulários em nosso aplicativo, é melhor substituir a classe "field_with_errors" somente nesse formulário.

Considerando 'parent_class' é uma das classes pai para o campo de erro do formulário (classe do formulário ou classe de qualquer elemento pai para o campo de erro),

  .parent_class .field_with_errors {
    display: inline;
  }

Ele corrigirá o problema e também não perturbará outras formas em nosso aplicativo.

OU

Se precisarmos substituir o estilo de "field_with_errors" para todo o aplicativo, como @dontangg disse,

.field_with_errors { display: inline; } 

fará a correção. Espero que ajude :)

Se você não deseja alterar field_error_procpara todo o aplicativo, o desembrulhar do jQuery pode fornecer uma solução mais direcionada para áreas de problemas específicas, por exemplo,

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