From 89c8598f3a739ac7b6a18f00ecc721b683bba8e8 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Sat, 11 Apr 2026 11:34:37 +0000 Subject: [PATCH] drt --- Bootstrap_new/css/theme-modern.css | 20 ++++---- Js/fonctions.js | 77 +++++++++++++++++++----------- 2 files changed, 58 insertions(+), 39 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 584bc88b..65431164 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -2023,16 +2023,16 @@ select[class*="selectpicker"], /* Amélioration de la visibilité sur les fonds sombres de l'ERP */ .swal2-popup {border: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;} -/* Style ESI pour les champs requis lors du focus */ -input[required]:visible:focus, -select[required]:visible:focus, -textarea[required]:visible:focus { - border-color: #dc3545 !important; /* Rouge danger */ - box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important; /* Halo rouge transparent */ - outline: 0; +/* Focus sur un input ou textarea classique */ +input[required]:focus, +textarea[required]:focus { + border-color: #dc3545 !important; + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important; } -/* Optionnel : Marquer les champs requis même sans focus */ -.required-field { - border-left: 3px solid #dc3545 !important; +/* Focus spécifique sur le bouton du selectpicker obligatoire */ +select[required] + .btn.dropdown-toggle:focus, +.bootstrap-select.show > .btn.dropdown-toggle { + border-color: #dc3545 !important; + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important; } \ No newline at end of file diff --git a/Js/fonctions.js b/Js/fonctions.js index cf3494df..3804f2e4 100755 --- a/Js/fonctions.js +++ b/Js/fonctions.js @@ -46248,26 +46248,38 @@ $(function(){ /** - * Gère le style visuel des champs obligatoires lors du focus - * Version ESI - Utilise les classes Bootstrap pour plus de cohérence + * Gère le style des champs obligatoires (Standards + Selectpicker) + * Applique une bordure rouge au focus pour les éléments avec l'attribut [required] */ function stylechampsRequis() { - // On cible les éléments requis visibles - const $requis = $('input, select, textarea').filter('[required]:visible'); + // 1. On cible tous les éléments requis (même cachés par selectpicker) + const $requis = $('input, select, textarea').filter('[required]'); - // On utilise la délégation d'événements ou un cycle simple $requis.each(function() { const $el = $(this); + let $target = $el; - $el.on('focus', function() { - // On applique une bordure rouge subtile et une légère ombre - $el.addClass('border-danger shadow-sm'); - $el.css('transition', 'all 0.3s ease'); + // 2. Détection du Selectpicker + // Si c'est un selectpicker, le vrai bouton visible est .dropdown-toggle + if ($el.hasClass('selectpicker')) { + // On cherche le conteneur parent généré par le plugin puis le bouton + $target = $el.closest('.bootstrap-select').find('.dropdown-toggle'); + } + + // 3. Gestion des événements sur la cible visible + $target.on('focus', function() { + $(this).css({ + 'border-color': '#dc3545', // Rouge ESI + 'box-shadow': '0 0 0 0.25rem rgba(220, 53, 69, 0.15)', // Halo subtil + 'transition': 'all 0.3s ease' + }); }); - $el.on('blur', function() { - // On remet la bordure initiale (subtile primaire ou grise) - $el.removeClass('border-danger shadow-sm'); + $target.on('blur', function() { + $(this).css({ + 'border-color': '#dee2e6', // Retour au gris standard + 'box-shadow': 'none' + }); }); }); } @@ -47825,33 +47837,40 @@ function formAjoutTableRef() { type: 'post', data: donnees, success: function(data) { - $('#div_maj_table').html(data); - - stylechampsRequis(); - - // 1. On initialise tous les selects du nouveau formulaire - // On ne demande PAS le focus ici (paramètre false) pour ne pas forcer l'ouverture du premier select + // 0. Injection du contenu + $('#div_maj_table').html(data); + + // 1. Initialisation des composants Selectpicker + // On ne force pas le focus ici (false) pour garder le contrôle total via le point 4 actualiserSelectPicker('#div_maj_table .selectpicker', false); - // 2. Initialisation des autres composants - const formatD = (codeLangue === "en_US") ? 'mm/dd/yyyy' : 'dd/mm/yyyy'; + // 2. Initialisation des Datepickers + const formatD = (codeLangue === "en_US") ? 'mm/dd/yyyy' : 'dd/mm/yyyy'; $(".datepicker").datepicker({ autoclose: true, format: formatD }); - - // 3. Focus intelligent sur le PREMIER champ du formulaire + + // 3. Application des styles "Champs Requis" (Bordure rouge au focus) + // On l'appelle AVANT le focus pour que le premier champ soit déjà "armé" + stylechampsRequis(); + + // 4. Focus intelligent sur le PREMIER champ du formulaire setTimeout(function() { - var $firstField = $('#div_maj_table').find('input:not([type="hidden"]), select').first(); + // On cherche le premier champ saisissable qui n'est pas caché + var $firstField = $('#div_maj_table').find('input:not([type="hidden"]):not([disabled]):visible, select:not([disabled]):visible').first(); - // Si le premier champ est un selectpicker, on utilise sa méthode focus dédiée - if ($firstField.hasClass('selectpicker')) { - $firstField.selectpicker('focus'); - } else { - $firstField.focus(); + if ($firstField.length > 0) { + if ($firstField.hasClass('selectpicker')) { + // Focus spécifique pour le composant Bootstrap-Select + $firstField.selectpicker('focus'); + } else { + // Focus standard + $firstField.focus(); + } } }, 200); - } + } }); }