Form validation with if statements not working

Question

I'm working on a form validation for a uni project and I can't seem to get it right. I'm using if statements inside a function and I get no reaction from the first-name input. I also tried to change the 'href'-link of the form element and no reaction, thank you in advance!

JsFiddle : https://jsfiddle.net/gcdb2nj3/2/

var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');

// Prevent-Default Funktion

function preventtDefault(e) {
    e.preventDefault();
};

formularValidierung();

function formularValidierung() {
    form.addEventListener('submit', function(e) {

        if(firstName.value === "") {
            warning.style.display="block"
            firstName.classList.add('input-invalid')
            e.preventDefault();
        } else {
            warning.style.display="none"
            e.preventDefault();
        }


    });
};

Answer 1

You have to pass the event object to your preventDefault function to prevent the default action. Note that the code you provided should work fine as you are calling event.preventDefault if the form validation does not pass whereas in your JSFiddle you are calling the preventDefault function without any arguments.

// Burger Menu Section


var mySideNav = document.getElementById('mySidenav');
var burgerLines =  document.querySelector('.burger-lines');
var closeBtn = document.querySelector('.closebtn');
var logo = document.querySelector('.logo');
var what = $('.what');

$(burgerLines).on('click', function openNav() {
    mySideNav.style.width="100%";
    mySideNav.style.opacity="1";
    burgerLines.style.opacity="0"
    closeBtn.style.color="white"
    closeBtn.style.fontSize="66px"
    closeBtn.style.top="-29px"
});


$(closeBtn).on('click', function closeNav() {
    mySideNav.style.width="0";
    mySideNav.style.opacity = ".00775";
    burgerLines.style.opacity="1"
});

// Form validation begins here

var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');

// Prevent-Default Funktion

function preventDefault(e) {
    e.preventDefault();
};

formularValidierung();

function formularValidierung() {
    form.addEventListener('submit', function(e) {
        
        if(firstName.value === "") {
            warning.style.display="block"
            firstName.classList.add('input-invalid')
            preventDefault(e);
        } else {
            warning.style.display="none"
            preventDefault(e);
        }
        
        
    });
};

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #FCFCFC;
}


.sidenav {
    font-family: 'Cormorant Garamond';
    font-weight: bold;
    width: 0px;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-x: hidden;
    padding-top: 65px;
    margin-left: 0px;
    text-align: center;
    transition: .7s;
}

.sidenav a {
    padding: 45px 8px 20px 32px;
    text-decoration: none;
    font-size: 28px;
    color: white;
    display: block;
    transition: 0.7s;
}


.sidenav a:hover {
    color: rgb(155, 155, 155);
}

.burger-lines {
    font-size:30px;
    cursor:pointer;
    position: fixed;
    top: 44px;
    right: 70px;
}

.logo {
    font-family: 'Oswald', sans-serif;
    padding: 40px 0px 0px 40px;
    text-decoration: none;
    font-size: 26px;
    color: black;
    display: block;
    position: fixed;
    z-index: 1;
    top: 5px;
}



.sidenav .closebtn {
    color: black;
    cursor:pointer;
    position: absolute;
    top: -5px;
    right: 60px;
    font-size: 46px;
}


.headline-2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 9.5rem;
    right: 15rem;
    font-size: 18px;
}

.form-wrap {
    text-align: center;
    margin-top: 10rem;
}

.form-wrap > input {
    font-family: 'Cormorant Garamond';
    margin-top: 20px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid lightgray;
    background: #FCFCFC;
}

#first-name, #last-name, #e-mail, #phone-number {
    width: 350px;
    height: 40px;
}

#custom-text-area {
    font-family: 'Cormorant Garamond';
    padding: 10px;
    margin-top: 1rem;
    width: 707px;
    height: 230px;
    font-size: 16px;
    background: #FCFCFC;
    border: 1px solid lightgray;
}

#submit {
    background: black;
    border: 1px solid black;
    font-size: 19px;
    text-align: left;
    color: white;
    width: 120px;
    height: 45px;
    margin-right: 29.3rem;
    margin-top: 25px;
}


#submit:hover {
    background: rgb(53, 53, 53);
    transition: .5s;
}

/*input:hover, #custom-text-area:hover {
    border: 1px solid red;
    color: red;
    transition: .5s ease-in;
}*/

.input-invalid {
    border: 1px solid red;
    color: red;
    transition: .5s ease-in;
}


.warning {
    font-family: 'Cormorant Garamond';
    color: red;
    position: relative;
    top: -36px;
    left: -3rem;
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Styx Somnus || Contact</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
    
    <header>
        <nav>

                <a class="logo" href="index.html">STYX SOMNUS</a>
    
                    <div class="sidenav" id="mySidenav">
    
                        <a href="javascript:void(0)" class="closebtn" >&times;</a>
                        <a href="index.html">Home</a>
                        <a href="about.html">About</a>
                        <a href="projects.html">Projects</a>
                        <a href="contact.html">Contact</a>
    
                    </div>
                <span class="burger-lines">&#9776;</span>
    
            </nav>
</header>

    <main>

        <p class="headline-2">Contact Form</p>


        <form action="#" class="form-wrap">

            <input type="text" id="first-name" placeholder="First Name*">
            <input type="text" id="last-name" placeholder="Last Name*"><br>
            <input type="email" id="e-mail" placeholder="Your E-Mail*">
            <input type="text" id="phone-number" placeholder="Phone Number"><br>
            <textarea id="custom-text-area" cols="40" rows="7" placeholder="Your Message..."></textarea><br>

            <input type="submit" id="submit" value="Submit     →">
            <p class="warning">All fields with * must be filled in.</p>

        </form>
    </main>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Answer 2

You should call preventDefault immediately upon submission, run your validation, then if validation passes, continue on with submission: https://jsfiddle.net/gcdb2nj3/4/

function formularValidierung() {
  form.addEventListener('submit', function(e) {
    e.preventDefault();

    if (firstName.value === "") {
      warning.style.display = "block"
      firstName.classList.add('input-invalid')
    } else {
      warning.style.display = "none"
      // submit form here
    }
  });
};

formularValidierung();