Add type de champs email and phone

app/assets/javascripts/description.js

@@ -0,0 +1,37 @@
+$(document).on('page:load', action_type_de_champs);
+$(document).ready(action_type_de_champs);
+
+
+function action_type_de_champs() {
+    $("input[type='email']").on('change', function () {
+        toggleErrorClass(this, validateEmail($(this).val()));
+    });
+
+    $("input[type='phone']").on('change', function () {
+        val = $(this).val();
+        val = val.replace(/[ ]/g, '');
+
+        toggleErrorClass(this, validatePhone(val));
+    });
+}
+
+function toggleErrorClass(node, boolean) {
+    if (boolean)
+        $(node).removeClass('input-error');
+    else
+        $(node).addClass('input-error');
+}
+
+function validatePhone(phone) {
+    var re = /^(0|(\+[1-9]{2})|(00[1-9]{2}))[1-9][0-9]{8}$/;
+    return validateInput(phone, re)
+}
+
+function validateEmail(email) {
+    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return validateInput(email, re)
+}
+
+function validateInput(input, regex) {
+    return regex.test(input);
+}

app/assets/stylesheets/description.scss

@@ -7,6 +7,11 @@
   }
 }
 
+.input-error {
+  color: darkred !important;
+  border-color: darkred !important
+}
+
 .type_champ-text {
   @extend .col-md-6;
   @extend .col-lg-6;
@@ -16,6 +21,24 @@
   }
 }
 
+.type_champ-email {
+  @extend .col-md-4;
+  @extend .col-lg-4;
+
+  input[type='email'] {
+    width: 100%;
+  }
+}
+
+.type_champ-phone {
+  @extend .col-md-2;
+  @extend .col-lg-2;
+
+  input[type='phone'] {
+    width: 100%;
+  }
+}
+
 .datepicker-switch {
   color: #0086b3;
   text-decoration: underline;

app/models/type_de_champ.rb

@@ -1,5 +1,7 @@
 class TypeDeChamp < ActiveRecord::Base
   enum type_champs: {text: 'text',
+                     email: 'email',
+                     phone: 'phone',
                      textarea: 'textarea',
                      datetime: 'datetime',
                      number: 'number',

app/views/users/description/show.html.haml

@@ -46,7 +46,7 @@
                   placeholder: champ.libelle,
                   id: "champs_#{champ.id}",
                   value: champ.value,
-                  type:"#{champ.type_champ}",
+                  type: champ.type_champ,
                   'data-provide' => ('datepicker' if champ.type_champ == 'datetime'),
                   'data-date-format' => ('dd/mm/yyyy' if champ.type_champ == 'datetime')}