Errors are stacking up and are deleting only the error class, not the error span element #21

Closed
MichaelGajda opened this Issue Mar 4, 2013 · 5 comments

Projects

None yet

4 participants

@MichaelGajda

My error case

I have a unique username field with a blacklist - so i tested "admin" as username
Bildschirmfoto 2013-03-03 um 09 48 34

as expected - it is not valid

So i changed it to an valid name:
Bildschirmfoto 2013-03-03 um 09 48 47

but the span with the error is still there, only the error class is gone.

so i try "admin" again:

Bildschirmfoto 2013-03-03 um 09 48 59

a second span shows up and both now have the error class.

This happens every time on every field where i do following steps:

  1. enter non-valid value -> tab out -> (error shows up)
    2a. back in field -> change to valid value -> tab out ( error class of span gets deleted, span itself stays)
    OR
    2b. back in field -> add or delete a letter/number (but still invalid) ->tab out -> another span gets added, both with error class
  2. rinse and repeat

if i do this on a password field, it even stacks spans to it when i'm not in the form anymore and press some keys.

My setup

client_side_validations (3.2.2)
client_side_validations-simple_form (2.0.1)
simple_form (2.0.4)
zurb-foundation (4.0.0)
rails (3.2.12)

Snippet of Model (is a Devise User Model)

before_validation :strip_and_downcase_username
  validates :username, :presence => true, :uniqueness => true
  validates_format_of :username, :with => /\A[A-Za-z0-9_]+\z/
  validates_length_of :username, :maximum => 32
  validates_exclusion_of :username, :in => USERNAME_BLACKLIST
  validate :freeze_username, :on => :update

  # Setup accessible (or protected) attributes for your model
  attr_accessor :login, :admin_action
  attr_accessible :firstname, :lastname, :login, :email, :password, :password_confirmation, :remember_me, :username

  def strip_and_downcase_username
      if username.present?
        username.strip!
        username.downcase!
      end
    end

Code for the form

= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),:validate => true, :html => {:class => 'custom' }) do |f|
  = f.input :username, placeholder:"Dein Name"
  = f.input :email, placeholder:"E-Mail"
  = f.input :password, placeholder:"Passwort", :validate => false
  = f.input :password_confirmation, placeholder:"Passwort bestätigen", :validate => false
  = f.button :submit, "Anmelden", :class => 'button success radius'

HTML Output as shown in screenshots

<form accept-charset="UTF-8" action="/users" class="nice custom" data-validate="true" id="new_user" method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline">
  <input name="utf8" type="hidden" value="">
  <input name="authenticity_token" type="hidden" value="---removed---=">
</div>
  <div class="input string required error">
   <label class="string required control-label" for="user_username">
      <abbr title="erfordert">*</abbr> Username</label>
<input class="string required" id="user_username" name="user[username]" placeholder="Dein Name" size="50" type="text" data-validate="true">
<small>ist nicht verfügbar</small>
<small>ist nicht verfügbar</small>
</div>

<input class="button button success radius" name="commit" type="submit" value="Anmelden">
</form>

For clarifiying: "ist nicht verfügbar" means "is not available"

@zewelor
zewelor commented Mar 5, 2013

I can also confirm it.

@bcardarella
Contributor

@MichaelGajda can I get a gist of the full HTML output for the page? That will help me quickly recreate the issue. (or if @zewelor can provide me with the full HTML of the page in question for his app)

@zewelor
zewelor commented Mar 5, 2013

I narrowed it down to my custom span wrapper around inputs. I changed default wrapper for simple_form from

b.use :label_input

to

b.use :label
b.use :input, :wrap_with => { :tag => :span, :class => 'span-input' }

in html

<label class="password required control-label" for="store_password">Password <abbr title="required">*</abbr></label>
<input data-validate="true" class="password required" id="store_password" maxlength="128" name="store[password]" placeholder="Enter your password" size="50" type="password">

vs

<label class="password required control-label" for="store_password">Password <abbr title="required">*</abbr></label>
<span class="span-input">
  <input data-validate="true" class="password required" id="store_password" maxlength="128" name="store[password]" placeholder="Enter your password" size="50" type="password">
</span>
@bcardarella
Contributor

Yeah if you're customizing how SimpleForm is rendering the form then you'll need to modify the add and remove functions to match that markup. Otherwise it cannot find the proper elements to remove.

Ideally the gem should be smarter about how this is happening but we're doing mostly Ember development now. I would be very very happy to bring on collaborators to ensure the gem stays maintained :)

@tagliala
Contributor

Hi,

thanks for reporting this.

I'm closing some old issues, hoping that this is not an issue anymore.

If it is still an issue, please provide a reproducible test case and I will consider reopening.

Contributing guidelines

@tagliala tagliala closed this Jan 20, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment