Merge pull request #2182 from betagouv/fix-form-validation

Fix form validation

app/assets/javascripts/new_design/direct_uploads.js

@@ -44,14 +44,26 @@ addEventListener("direct-upload:end", function (event) {
   element.classList.add("direct-upload--complete");
 });
 
-addEventListener('load', function() {
+addEventListener('turbolinks:load', function() {
     var submitButtons = document.querySelectorAll('form button[type=submit][data-action]');
     var hiddenInput = document.querySelector('form input[type=hidden][name=submit_action]');
     submitButtons = [].slice.call(submitButtons);
 
     submitButtons.forEach(function(button) {
       button.addEventListener('click', function() {
-        hiddenInput.value = button.getAttribute('data-action');
+        // Active Storage will intercept the form.submit event to upload
+        // the attached files, and then fire the submit action again – but forgetting
+        // which button was clicked. So we manually set the type of action that trigerred
+        // the form submission.
+        var action = button.getAttribute('data-action');
+        hiddenInput.value = action;
+        // Some form fields are marked as mandatory, but when saving a draft we don't want them
+        // to be enforced by the browser.
+        if (action === 'submit') {
+          button.form.removeAttribute('novalidate');
+        } else {
+          button.form.setAttribute('novalidate', 'novalidate');
+        }
       });
     });
 });

app/views/shared/dossiers/_edit.html.haml

@@ -11,7 +11,7 @@
   - if apercu
     - form_options = { url: '', method: :get, html: { class: 'form', multipart: true } }
   - else
-    - form_options = { html: { class: 'form', multipart: true } }
+    - form_options = { html: { class: 'form', multipart: true, novalidate: dossier.brouillon? } }
 
   = form_for dossier, form_options do |f|
     = f.fields_for :champs, dossier.champs do |champ_form|

spec/features/new_user/dossier_spec.rb

@@ -84,7 +84,7 @@ feature 'The user' do
   end
 
   let(:simple_procedure) do
-    tdcs = [create(:type_de_champ, mandatory: true, libelle: 'text')]
+    tdcs = [create(:type_de_champ, mandatory: true, libelle: 'texte obligatoire')]
     create(:procedure, :published, :for_individual, types_de_champ: tdcs)
   end
 
@@ -92,19 +92,23 @@ feature 'The user' do
     log_in(user.email, password, simple_procedure)
     fill_individual
 
+    # Check an incomplete dossier can be saved as a draft, even when mandatory fields are missing
     click_on 'Enregistrer le brouillon'
+    expect(user_dossier.reload.brouillon?).to be(true)
     expect(page).to have_content('Votre brouillon a bien été sauvegardé')
     expect(page).to have_current_path(dossier_path(user_dossier))
 
+    # Check an incomplete dossier cannot be submitted when mandatory fields are missing
     click_on 'Soumettre le dossier'
     expect(user_dossier.reload.brouillon?).to be(true)
     expect(page).to have_current_path(dossier_path(user_dossier))
 
-    fill_in('text', with: 'super texte')
+    # Check a dossier can be submitted when all mandatory fields are filled
+    fill_in('texte obligatoire', with: 'super texte')
 
     click_on 'Soumettre le dossier'
     expect(user_dossier.reload.en_construction?).to be(true)
-    expect(champ_value_for('text')).to eq('super texte')
+    expect(champ_value_for('texte obligatoire')).to eq('super texte')
     expect(page).to have_current_path(merci_dossier_path(user_dossier))
   end