tagliala
commented
6 years ago Hi @prodigerati could you please post, as required
- Validation snippet from your model
- The resulting HTML
They are important
Closed prodigerati closed 6 years ago
tagliala
commented
6 years ago Hi @prodigerati could you please post, as required
They are important
prodigerati
commented
6 years ago Sorry, here is the model snippet:
EMAIL_REGEX = /[A-Z0-9._%+-]+@test.com/i
validates_presence_of :username, :email, :first_name, :last_name, :role_ids
validates :password,
:password_confirmation,
confirmation: true,
length: { in: 6..25 },
on: :create
validates_presence_of :password, :password_confirmation, on: :create
validates :password,
:password_confirmation,
confirmation: true,
length: { in: 6..25 },
on: :update,
allow_blank: true
validates_uniqueness_of :email, :username
validates :email, format: EMAIL_REGEXBelow is the resulting HTML:
<form class="simple_form new_user" id="new_user" novalidate="novalidate" data-client-side-validations="{"html_settings":{"type":"SimpleForm::FormBuilder","error_class":null,"error_tag":"div","wrapper_error_class":"form-group-invalid","wrapper_tag":"div","wrapper_class":"form-group","wrapper":"vertical_form"},"number_format":{"separator":".","delimiter":","},"validators":{"user[first_name]":{"presence":[{"message":"can't be blank"}]},"user[last_name]":{"presence":[{"message":"can't be blank"}]},"user[username]":{"presence":[{"message":"can't be blank"}],"uniqueness":[{"message":"has already been taken","case_sensitive":true}]},"user[email]":{"presence":[{"message":"can't be blank"}],"uniqueness":[{"message":"has already been taken","case_sensitive":true}],"format":[{"message":"is invalid","with":{"source":"[A-Z0-9._%+-]+@test.com","options":"gi"}}]},"user[password]":{"length":[{"messages":{"maximum":"is too long (maximum is 72 characters)"},"maximum":72},{"messages":{"minimum":"is too short (minimum is 6 characters)","maximum":"is too long (maximum is 25 characters)"},"minimum":6,"maximum":25}],"confirmation":[{"message":"doesn't match Password","case_sensitive":true,"allow_blank":true},{"message":"doesn't match Password","case_sensitive":true}],"presence":[{"message":"can't be blank"}]},"user[password_confirmation]":{"confirmation":[{"message":"doesn't match Password confirmation","case_sensitive":true}],"length":[{"messages":{"minimum":"is too short (minimum is 6 characters)","maximum":"is too long (maximum is 25 characters)"},"minimum":6,"maximum":25}],"presence":[{"message":"can't be blank"}]},"user[role_ids][]":{"presence":[{"message":"can't be blank"}]}}}" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="4ZCg9MsmDympeiZjf006aip99H0ksLsTfadMlurwABxIQWW/+x6qvL1Obcc+7emCUjTZLIqHngkYeEp3zsEyIg==">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-group string required user_first_name"><label class="form-control-label string required" for="user_first_name">First name <abbr title="required">*</abbr></label><input class="form-control string required" type="text" name="user[first_name]" id="user_first_name" data-validate="true"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-group string required user_last_name"><label class="form-control-label string required" for="user_last_name">Last name <abbr title="required">*</abbr></label><input class="form-control string required" type="text" name="user[last_name]" id="user_last_name" data-validate="true"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-group string required user_username"><label class="form-control-label string required" for="user_username">Username <abbr title="required">*</abbr></label><input class="form-control string required" type="text" name="user[username]" id="user_username" data-validate="true"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-group email required user_email"><label class="form-control-label email required" for="user_email">Email <abbr title="required">*</abbr></label><input class="form-control string email required" type="email" name="user[email]" id="user_email" data-validate="true"></div>
</div>
</div>
</div>
<h4 class="form-section">
<i class="ft-file-text"></i> Credentials</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-group password required user_password"><label class="form-control-label password required" for="user_password">Password <abbr title="required">*</abbr></label><input class="form-control password required" type="password" name="user[password]" id="user_password" data-validate="true"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-group password required user_password_confirmation"><label class="form-control-label password required" for="user_password_confirmation">Password confirmation <abbr title="required">*</abbr></label><input class="form-control password required" type="password" name="user[password_confirmation]" id="user_password_confirmation"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-group select required user_roles"><label class="form-control-label select required" for="user_role_ids">Assign Roles <abbr title="required">*</abbr></label><input name="user[role_ids][]" type="hidden" value=""><select class="form-control select required" multiple="multiple" name="user[role_ids][]" id="user_role_ids" data-validate="true"><option value="1">admin</option><option value="2">general</option></select></div>
</div>
</div>
</div>
<div class="form-group">
<fieldset class="form-group boolean optional user_active"><div class="form-check"><input name="user[active]" type="hidden" value="0"><input class="form-check-input boolean optional" type="checkbox" value="1" name="user[active]" id="user_active" data-validate="true"><label class="form-check-label boolean optional" for="user_active">Active</label></div></fieldset>
</div>
</form>Thank you for taking time to review!
tagliala
commented
6 years ago Thanks, now I should be able to check this... as soon as I get back my development machine from Apple.
PS: if the above regexp is not a mock or an example for this bug report, please avoid /[A-Z0-9._%+-]+@test.com/i: this will allow new lines, tabulations, spaces and other stuff you don't want in an email address.
Devise regexp for testing email: https://github.com/plataformatec/devise/blob/f220b992c338122226f6fd396056d5a1adf28df8/lib/generators/templates/devise.rb#L171
prodigerati
commented
6 years ago @tagliala any luck figuring this out? Thank you.
tagliala
commented
6 years ago @prodigerati sorry, this will take a while on my side
tagliala
commented
6 years ago Sorry for the late reply, I gave up with my machine and I will let my MBP drain battery instead of sleeping 🤷♂️
I'm able to replicate the issue with your form but I've noticed that you have some wrong settings:
I would rather expect something like this:
Please make sure that error class is not null
Also, your template is creating nested form-group tags (do not wrap f.input :active inside a form group, it will create a form-group wrapper on its own) .
Are you using Bootstrap 4? CSV Simple Form is not ready for TWBS4. Please take a look at: https://github.com/DavyJonesLocker/client_side_validations-simple_form/issues/65
Take a look at your form with the error_class set to something different than null:
Anyway, this is not an issue with CSV so I'm closing here but feel free to comment
Steps to reproduce*
When tabbing out of required field in a simple_form it throws the error below:
Expected behavior*
I would expect html error that field is required.
Actual behavior*
System configuration*
Rails version: Rails Version 5.2 Ruby version: Ruby Version 4.2.1
Client Side Validations version: client_side_validations 11.1.2 client_side_validations-simple_form 6.6.0 simple_form 4.0.0
Code snippet from your model of the validations*
application.js
The whole form code from your template*
Form Code:
The resulting HTML*