Form: add pseudo native form validation

app/assets/javascripts/new_design/form_validation.js

@@ -0,0 +1,8 @@
+$(document).on('blur keydown', 'input, textarea', function() {
+  $(this).addClass('touched');
+});
+
+$(document).on('click', 'input[type="submit"]:not([formnovalidate])', function() {
+  var $form = $(this).closest('form');
+  $('input, textarea', $form).addClass('touched');
+});

app/assets/stylesheets/new_design/forms.scss

@@ -58,6 +58,17 @@
     max-width: 180px;
   }
 
+  input:invalid,
+  textarea:invalid {
+    box-shadow: none;
+  }
+
+  input.touched:invalid,
+  textarea.touched:invalid {
+    border-color: $dark-red;
+    box-shadow: 0px 0px 5px $dark-red;
+  }
+
   select,
   .select2-selection {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

app/views/root/patron.html.haml

@@ -7,6 +7,7 @@
         = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ }
       %input{ type: "password", value: "12345678" }
       %input.button.send{ type: "submit", value: "Envoyer" }
+      %input.button.send{ type: "submit", value: "Enregistrer un brouillon (formnovalidate)", formnovalidate: true }
 
     %h1 Boutons