Formulare mit modalen Fehlermeldungen Contao 3

[joc]

Hi zusammen!
Hier ein Weg, wie man die Fehlermeldungen in Contao 3 Formularen "modal" anzeigen kann.
Vorteil: Durch die Fehlermeldungen "fliegt" das Form-Layout nicht mehr auseinander.
JQuery wird benötigt bzw. muss aktiviert sein.

1. JQuery Plugin von hier downloaden:
https://github.com/ericmmartin/simplemodal/downloads

2. Das Plugin entpacken (z.B. nach "assets/jquery/simplemodal/jquery.simplemodal.1.4.3.min.js")

3. Template /system/modules/core/templates/form.html5 nach /templates kopieren und

4. so erweitern (ganz unten im Template vor dem letzen "</div"> einfügen):

<?php if ($this->hasError): ?>

<?php /* Modal Fehlermeldungen */ ?>

<div id="formerror"></div> 

<script src="assets/jquery/simplemodal/jquery.simplemodal.1.4.3.min.js"></script>

<script>
jQuery(document).ready(function($){

// alle p.error "verschieben" in modal div
$('p.error').appendTo('#formerror');
$("#formerror").modal();
});
</script>

<?php endif; ?>

<?php /* end Modal Fehlermeldungen */ ?>

5. noch ein wenig CSS ergänzen, z.B.:

#formerror{display:none;}
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {height:auto !important; width:40% !important; color:#c00; background-color:#FDE777; border:4px solid #444; padding:12px;font-size:1em;}
#simplemodal-container a.modalCloseImg {background:url("x.png") no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:8px;}
label.error{color:#c00;}

5.a) die Grafik "x.png"
aus dem CSS oben muss man noch erstellen und in diesem Falle ins selbe Verzeichnis kopieren, in dem die CSS-Datei liegt.

Das wars schon.

Beste Grüße : Joc

[zonky]

ab jQuery 1.9.x:

+ http://code.jquery.com/jquery-migrate-1.0.0.js

<?php /* Modal Fehlermeldungen */ ?>
<div id="formerror"></div> 
<script src="assets/jquery/simplemodal/jquery-migrate-1.0.0.js"></script>
<script src="assets/jquery/simplemodal/jquery.simplemodal.1.4.3.min.js"></script>
<script>
jQuery(document).ready(function($){
    // alle p.error "verschieben" in modal div
    $('p.error').appendTo('#formerror');
    $("#formerror").modal();
});
</script>
<?php endif; ?>
<?php /* end Modal Fehlermeldungen */ ?>