use-associations-validations

[MichalRemis]

I need this change to make checkboxes/radiobuttons work in CSV-simple_form.

Currently in CSV validations are added to CSV hash (via collection_check_boxes/collection_radio_buttons overrides). Events aren't attached to radiobuttons (filtered out). For checkboxes, events are attached but when JS validating, their validations are NOT applied because of special names of association checkbox inputs (e.g. user[:roles][]). Not sure if this was an intention, but it is allright because standard presence validation wouldn't work for checkboxes anyway, and as I understand they are not going to be supported in main CSV.

But to make collections work in CSV-simple_form I need to use (overridden) validations and therefore need to clean input names user[:roles][]->user[:roles]. Couldn't do it in CSV-simple_form therefore updating it here in main. Maybe you have some better idea how to achieve this.

[coveralls]

Coverage remained the same at 100.0% when pulling d548184 on MichalRemis:attach-correctly-associations-validations into c7468a6 on DavyJonesLocker:master.

[tagliala]

@MichalRemis can you please paste the generated HTML code of a page showing the issue, as well as the ruby template?

Maybe with both collection_check_boxes and collection_radio_buttons, so I can take a look of the actual behavior

[MichalRemis]

Sure:

ruby:

class Box < ApplicationRecord
  validates :colors, presence: true
  validates :material, presence: true

  belongs_to :material
  has_and_belongs_to_many :colors
end

<%= form_for @box, validate: true do |f| %>
    <%= f.collection_radio_buttons :material, Material.all, :id, :name %>
    <%= f.collection_check_boxes :colors, Color.all, :id, :name %>

    <%= f.submit %>
  <% end %>

HTML:

<form class="new_box" id="new_box" novalidate="novalidate" data-client-side-validations="{&quot;html_settings&quot;:{&quot;type&quot;:&quot;ActionView::Helpers::FormBuilder&quot;,&quot;input_tag&quot;:&quot;\u003cdiv class=\&quot;field_with_errors\&quot;\u003e\u003cspan id=\&quot;input_tag\&quot;\u003e\u003c/span\u003e\u003c/div\u003e&quot;,&quot;label_tag&quot;:&quot;\u003cdiv class=\&quot;field_with_errors\&quot;\u003e\u003clabel id=\&quot;label_tag\&quot;\u003e\u003c/label\u003e\u003c/div\u003e&quot;},&quot;number_format&quot;:{&quot;separator&quot;:&quot;.&quot;,&quot;delimiter&quot;:&quot;,&quot;},&quot;validators&quot;:{&quot;box[material]&quot;:{&quot;presence&quot;:[{&quot;message&quot;:&quot;can't be blank&quot;},{&quot;message&quot;:&quot;must exist&quot;}]},&quot;box[colors]&quot;:{&quot;length&quot;:[{&quot;messages&quot;:{&quot;minimum&quot;:&quot;is too short (minimum is 1 character)&quot;,&quot;maximum&quot;:&quot;is too long (maximum is 2 characters)&quot;},&quot;minimum&quot;:1,&quot;maximum&quot;:2}]}}}" action="/boxes" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="6TvRPJ5x9rYO1hE4n3kwWBraopOEOmXI9YU93cNFbXVnaFk7RuUgCv8BzP6naBoHRO5qapfWkJppgf9tIN3ITg==">
  
  <input type="hidden" name="box[material]" value="" data-validate="true">
  <input type="radio" value="1" name="box[material]" id="box_material_1" data-validate="true">
  <label for="box_material_1">Wood</label>
  <input type="radio" value="2" name="box[material]" id="box_material_2" data-validate="true">
  <label for="box_material_2">Plastic</label>
  <input type="radio" value="3" name="box[material]" id="box_material_3" data-validate="true">
  <label for="box_material_3">Glass</label>
  
  <input type="hidden" name="box[colors][]" value="">
  <input type="checkbox" value="1" name="box[colors][]" id="box_colors_1" data-validate="true">
  <label for="box_colors_1">Red</label>
  <input type="checkbox" value="2" name="box[colors][]" id="box_colors_2" data-validate="true">
  <label for="box_colors_2">Green</label>
  <input type="checkbox" value="3" name="box[colors][]" id="box_colors_3" data-validate="true">
  <label for="box_colors_3">Blue</label>

  <input type="submit" name="commit" value="Create Box" data-disable-with="Create Box">
</form>

Problem with plain Rails radio/checkbox collections is that they don't have a wrapper around them like simple_form does.

Regarding this PR. You can see validations for box[colors] are in the CSV hash but currently when JS validating checkbox input,

client_side_validations/src/main.js

Lines 63 to 71 in c7468a6

	$.fn.isValid = function (validators) {
	const obj = $(this[0])
	if (obj.is('form')) {
	return validateForm(obj, validators)
	} else {
	return validateElement(obj, validatorsFor(this[0].name, validators))
	}
	}

it doesn't use box[colors] JS validator because name of input is box[colors][]. This function:

client_side_validations/src/main.js

Line 83 in c7468a6

const cleanElementName = (elementName, validators) => {

and my PR's change in it cleans the name to box[colors] to apply validators correctly.

[tagliala]

Thanks

Got the need for different names

we should do three things:

1. Move /\[(\w+_attributes)\]\[[\da-z_]+\](?=\[(?:\w+_attributes)\])/g to a self-explaining constant. I don't remember what this regexp ecaxtly do, we need to go back in history. -- SEPARATE PR/COMMIT
2. See if we can safely omit the trailing [] when checking for validations.
3. Find another solution (we can't check for the formbuilder's name)

[MichalRemis]

1. Move /\[(\w+_attributes)\]\[[\da-z_]+\](?=\[(?:\w+_attributes)\])/g to a self-explaining constant. I don't remember what this regexp ecaxtly do, we need to go back in history. -- SEPARATE PR/COMMIT

Look's like it normalizes input name for nested attributes https://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html

2. See if we can safely omit the trailing [] when checking for validations.

I don't think we may omit it safely for mainCSV, because JS validators, e.g.:

client_side_validations/src/validators/local/absence_presence.js

Lines 9 to 13 in c7468a6

	export const presenceLocalValidator = (element, options) => {
	if (!valueIsPresent(element.val())) {
	return options.message
	}
	}

aren't ready for checkboxes and would report false errors for association checkbox's inputs (not tested though). That's why I added SimpleForm::FormBuilder condition. It would be safe if you tweak validators to work with checkboxes, something like https://github.com/MichalRemis/client_side_validations-simple_form/blob/add-checkboxes-and-radios-support/src/validator_overrides/presence.js

3. Find another solution (we can't check for the formbuilder's name)

If we can't check formbuilder's name and you have no other idea or won't implement working collection_checkboxes in main CSV, I could implement it in CSV_simple-form, but it would require a lot of code copy & pasting from main - I am not sure if that's a good idea.