diff --git a/app/assets/javascripts/description.js b/app/assets/javascripts/description.js new file mode 100644 index 000000000..7ca93b611 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/app/assets/stylesheets/description.scss b/app/assets/stylesheets/description.scss index 0c89a0a05..32bfd4956 100644 --- a/app/assets/stylesheets/description.scss +++ b/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; diff --git a/app/models/type_de_champ.rb b/app/models/type_de_champ.rb index 8bd7c8a95..4f1b0e88a 100644 --- a/app/models/type_de_champ.rb +++ b/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', diff --git a/app/views/users/description/show.html.haml b/app/views/users/description/show.html.haml index a1d9b0300..1cf3428e7 100644 --- a/app/views/users/description/show.html.haml +++ b/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')}