使用if语句无效的表单验证

Question

我正在为uni项目进行表单验证，我似乎无法做到正确。我在函数中使用if语句，并且我从第一个名字输入中得不到任何反应。我也试图改变表单元素的'href'链接而没有反应，谢谢你提前！

的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

您必须将event对象传递给preventDefault函数以防止默认操作。请注意，如果表单验证没有通过，则在调用event.preventDefault时，您提供的代码应该可以正常工作，而在JSFiddle中，您调用的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/[email protected]/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

您应该在提交后立即致电preventDefault，运行验证，然后如果验证通过，继续提交：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();