Navigation überspringen

Beispiel: check Formular

Beabsichtigte Lernziele

Ein sehr häufiger Einsatz von Javascript ist die dynamische Überprüfung von Anwendereingaben in Online-Formulare.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Anbindung Client - Javascript DB</title>
        <link rel="stylesheet" type="text/css" href="styleCSS.css">
        <script type="text/javascript" src="javaScriptRoutines.js"></script>
    </head>
    <body>
        <center>
            <form action="#" method="POST" onsubmit="return checkForm();">
                <h1>Client-Dynamik</h1>
                <label>
                    <span>Name:</span>
                    <p><input type="text" name="Name" id="Name"></p>
                </label>
                <label>
                    <span>Vorname:</span>
                    <p><input type="text" name="Vorname" id="Vorname"></p>
                </label>
                <label>
                    <span>E-Mail:</span>
                    <p><input type="text" name="Email" id="emailInput"></p>
                </label>
                <label>
                    <span>PLZ:</span>
                    <p><input type="text" name="PLZ" id="plz"></p>
                </label>
                <label>
                    <span>Wohnort:</span>
                    <p><input type="text" name="Wohnort" id="Wohnort"></p>
                </label>
                <label>
                    <span>&nbsp;</span>
                    <p><input type="submit" name="speichern" value="speichern"></p>
                </label>
            </form>
        </center>
    </body>
</html>

javaScriptRoutines.js

In Zeile 10 oben wird durch onsubmit="return checkForm();" nach drücken des submit-Buttons die Javascript-Funktion checkForm aufgerufen.

function checkForm(){
    
    if(document.getElementById("Name").value === ""){
        alert("Das Feld Name darf nicht leer sein!");
        document.getElementById("Name").style.backgroundColor = "red";
        document.getElementById("Name").focus();
        return false;
    }
    if(document.getElementById("Vorname").value === ""){
        alert("Das Feld Vorname darf nicht leer sein!");
        document.getElementById("Vorname").style.backgroundColor = "red";
        document.getElementById("Vorname").focus();
        return false;
    }
    if(document.getElementById("emailInput").value === ""){
        alert("Das Feld EMail darf nicht leer sein!");
        document.getElementById("emailInput").style.backgroundColor = "red";
        document.getElementById("emailInput").focus();
        return false;
    }
    if(document.getElementById("emailInput").value.indexOf("@")===-1){
        alert("Das Feld EMail enthaelt kein '@'-Zeichen!");
        document.getElementById("emailInput").style.backgroundColor = "red";
        document.getElementById("emailInput").focus();
        return false;
    }
    if(document.getElementById("emailInput").value.indexOf(".")===-1){
        alert("Das Feld EMail enthaelt kein '.'-Zeichen!");
        document.getElementById("emailInput").style.backgroundColor = "red";
        document.getElementById("emailInput").focus();
        return false;
    }
    if(document.getElementById("plz").value === ""){
        alert("Das Feld PLZ darf nicht leer sein!");
        document.getElementById("plz").style.backgroundColor = "red";
        document.getElementById("plz").focus();
        return false;
    }
    if(document.getElementById("Wohnort").value === ""){
        alert("Das Feld Wohnort darf nicht leer sein!");
        document.getElementById("Wohnort").style.backgroundColor = "red";
        document.getElementById("Wohnort").focus();
        return false;
    }
    
}