Form Validation

HTML

  
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular</title>
    <link rel="stylesheet" href="style.css">
    <!--Einbindung von Fontawesome für die Icons-->
</head>

<body>
    <form action="" method="post">

        <h2>Kontakt</h2>
        <label for="name">Name:</label>
        <div class="icon">
            <input type="text" name="name" id="name">
            <!--
            HTML Validierung:
            required minlength="3" maxlength="100"
            -->
            <i class="fa-solid fa-triangle-exclamation errorIcon"></i>
            <i class=" fa-solid fa-circle-check erfolgIcon"></i>
        </div>
        <div class="errorDiv"></div>

        <label for="mail">Email:</label>
        <div class="icon">
            <input type="email" name="mail" id="mail">
            <!--
            HTML Validierung:
            required minlength="3" maxlength="100"
            -->
            <i class="fa-solid fa-triangle-exclamation errorIcon"></i>
            <i class=" fa-solid fa-circle-check erfolgIcon"></i>
        </div>
        <div class="errorDiv"></div>

        <label for="nachricht">Nachricht:</label>
        <div class="icon">
            <textarea name="nachricht" id="nachricht" rows="10">
            <!--
            HTML Validierung:
            required minlength="3" maxlength="1000"
            -->
            </textarea>
            <i class="fa-solid fa-triangle-exclamation errorIcon"></i>
            <i class=" fa-solid fa-circle-check erfolgIcon"></i>
        </div>
        <div class="errorDiv"></div>

        <input type="submit" value="Senden">

    </form>

    <script src="main.js"></script>
</body>

</html>

CSS

  
* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    margin: 0;
    background-color: lightblue;
}

form {
    width: 80%;
    margin: 10%;
    background-color: lightgrey;
    border: 2px solid darkgrey;
    border-radius: 10px;
    padding: 20px;
}

input,
textarea {
    width: 100%;
    border: 1px solid darkgrey;
    border-radius: 5px;
    font-size: 20px;
    outline: none;
    padding: 0;
}

label {
    display: block;
    margin-top: 10px;
}

input:focus,
textarea:focus {
    border: 1px solid lightblue;
    background-color: rgba(255, 255, 255, 0.8);
}

[type="submit"] {
    width: 25%;
    margin-top: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}

.errorDiv {
    color: red;
    font-size: 0.7em;
    white-space: pre-wrap;
}


.icon {
    position: relative;
}

form .erfolgIcon,
form .errorIcon {
    position: absolute;
    top: 5px;
    right: 10px;
    display: none;
}

.errorIcon {
    color: red;
}

.erfolgIcon {
    color: green;
}

form .sichtbar {
    display: block;
}

JS

  
let regMail = new RegExp("^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$");

let inputName = document.querySelector("#name");
let inputMail = document.querySelector("#mail");
let inputNachricht = document.querySelector("#nachricht");
let inputSubmit = document.querySelector("[type='submit']");

let allErrorDiv = document.querySelectorAll(".errorDiv");

let errorMessageName = [];
let errorMessageMail = [];
let errorMessageNachricht = [];

inputName.addEventListener("input", checkInputName);
inputMail.addEventListener("input", checkInputMail);
inputNachricht.addEventListener("input", checkInputNachricht);

document.forms[0].addEventListener("submit", checkInput);

function checkInput(e) {
    e.preventDefault();
    checkInputName();
    checkInputMail();
    checkInputNachricht();

    let allIcons = document.querySelectorAll(".errorIcon");
    let checkIcon = [];

    for (let i = 0; i < allIcons.length; i++) {
        checkIcon.push(allIcons[i].classList.contains("sichtbar"));
    }

    if (checkIcon.includes(true)) {

    }
    else {
        document.forms[0].submit();
    }


}


function showError(inpId) {

    document.querySelector("#" + inpId + "~.errorIcon").
        classList.add("sichtbar");
    document.querySelector("#" + inpId + "~.erfolgIcon").
        classList.remove("sichtbar");

}
function showErfolg(inpId) {

    document.querySelector("#" + inpId + "~.errorIcon").
        classList.remove("sichtbar");
    document.querySelector("#" + inpId + "~.erfolgIcon").
        classList.add("sichtbar");

}


function checkInputName() {

    let errorName = [];

    errorName.push(checkEmpty(inputName, errorMessageName));
    errorName.push(checkMinMax(inputName, 3, 100, errorMessageName));



    if (errorName.includes(false)) {
        showError(inputName.id);
        allErrorDiv[0].textContent = errorMessageName.join("");
    }
    else {
        showErfolg(inputName.id);
        allErrorDiv[0].textContent = "";
    }
}

function checkInputNachricht() {

    let errorNachricht = [];

    errorNachricht.push(checkEmpty(inputNachricht, errorMessageNachricht));
    errorNachricht.push(checkMinMax(inputNachricht, 3, 1000, errorMessageNachricht));



    if (errorNachricht.includes(false)) {
        showError(inputNachricht.id);
        allErrorDiv[2].textContent = errorMessageName.join("");
    }
    else {
        showErfolg(inputNachricht.id);
        allErrorDiv[2].textContent = "";
    }
}

function checkInputMail() {

    let errorMail = [];

    errorMail.push(checkEmpty(inputMail, errorMessageMail));
    errorMail.push(checkMinMax(inputMail, 3, 100, errorMessageMail));
    errorMail.push(checkMail(inputMail, errorMessageMail));

    if (errorMail.includes(false)) {
        showError(inputMail.id);
        allErrorDiv[1].textContent = errorMessageMail.join("");
    }
    else {
        showErfolg(inputMail.id);
        allErrorDiv[1].textContent = "";
    }
}

function checkMinMax(inp, min, max, arrayMessage) {
    if (inp.value.length < min) {
        arrayMessage[1] = "Mindestens " + min + " Zeichen\n";
        return false;
    }
    else if (inp.value.length > max) {
        arrayMessage[2] = "Maximal " + max + " Zeichen\n";
        return false;
    }
    else {
        arrayMessage[1] = "";
        arrayMessage[2] = "";
        return true;
    }
}
function checkMail(inp, arrayMessage) {
    if (!regMail.test(inp.value)) {
        arrayMessage[3] = "Format ungültig\n";
        return false;
    }
    else {
        arrayMessage[3] = "";
        return true;
    }
}


function checkEmpty(inp, arrayMessage) {

    if (inp.value.trim() === "") {
        arrayMessage[0] = "Dies ist ein Pflichtfeld\n";
        return false;
    }
    else {
        arrayMessage[0] = "";
        return true;
    }
}

academy.of.webdesign

academy.of.webdesign

Form Validation

HTML

CSS

JS