Formular Validierung per HTML5 und jQuery

Hallo zusammen,
ich habe ein EFG Formular mit Contao 3.x mit der HTML5 validierung am laufen, das mir aber nicht genug Infos für den Benutzer bietet.
Zu dem Zweck habe ich ein jQuery Snippet auf das Form #f3 angepasst um den Submit zu unterbinden. Zusätzlich wird so lange nicht alle
Felder gefüllt werden ein DIV mit einer Warnung angezeigt.

Vielleicht kann der ein oder andere das als Vorlage zum anpassen verwenden, oder mir / uns noch andere Möglichkeiten nennen die hilfreich sind.

PHP-Code:

---


<div id="formerror"><p>Bitte füllen Sie alle mit <span class="mandatory">*</span> gekennzeichneten Felder aus!</p></div>

<script type="text/javascript">

$(function () {
    var submitButton = $("#f3 input[type='submit']").attr("disabled", true);
    $("#f3 input:required").change(function () {
        var valid = true;
        $.each($("#f3 input:required"), function (index, value) {
            
            if(!$(value).val()){
               valid = false;
            }
        });
        if(valid){
            $(submitButton).attr("disabled", false);
            console.log("valid");
            $('#formerror').removeClass('warning');
        } 
        else{
             $(submitButton).attr("disabled", true);
             $('#formerror').addClass('warning');
        }
    });
});
</script> 


---

Für Verbesserungen bin ich gerne offen! :cool:


Viele Grüße

Markus