Clash Royale CLAN TAG#URR8PPP

Form validation with if statements not working

I'm working on a form validation for a uni project and I can't seem to get it right, I'm doing it with if statement inside of a function just for it and 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();



);
;


e.preventDefault()

preventtDefault

preventDefault

standardVerhindern

2 Answers
2

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

preventDefault

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();


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.

event

preventDefault

event.preventDefault

preventDefault

// 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">☰</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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.