Javascript 使用if语句进行表单验证不起作用

我正在为一个uni项目进行表单验证，但我似乎做得不对。 我在函数中使用if语句，而名字输入没有反应。 我还尝试更改表单元素的“href”-链接，没有任何反应，提前谢谢

JsFiddle：

---

提交后应立即调用

preventDefault

，运行验证，如果验证通过，继续提交：

---

您必须将

事件

对象传递给

preventDefault

函数以阻止默认操作。请注意，在调用

event.preventDefault

时，如果表单验证未通过，您提供的代码应该可以正常工作，而在JSFIDLE中，您调用的是

preventDefault

函数没有任何参数

//汉堡菜单部分
var mySideNav=document.getElementById（'mySideNav'）；
var burgerLines=document.querySelector（'.burgerLines'）；
var closeBtn=document.querySelector（'.closeBtn'）；
var logo=document.querySelector（'.logo'）；
var what=$（'.what'）；
$（行）。在（'click'，函数openNav（）{
mySideNav.style.width=“100%”；
mySideNav.style.opacity=“1”；
burgerLines.style.opacity=“0”
closeBtn.style.color=“白色”
closeBtn.style.fontSize=“66px”
closeBtn.style.top=“-29px”
});
$（closeBtn）.on（'click'，函数closeNav（）{
mySideNav.style.width=“0”；
mySideNav.style.opacity=“.00775”；
burgerLines.style.opacity=“1”
});
//表单验证从这里开始
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'）；
//防止默认函数
功能默认值（e）{
e、 预防默认值（）；
};
公式化rValidierung（）；
函数公式arvalidierung（）{
表.addEventListener（'submit'，函数（e）{
如果（firstName.value==“”）{
warning.style.display=“block”
firstName.classList.add（'input-invalid'）
防止违约（e）；
}否则{
warning.style.display=“无”
防止违约（e）；
}
});
};
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景:#fcfc；
}
.侧导航{
字体系列：“鸬鹚加拉蒙德”；
字体大小：粗体；
宽度：0px；
身高：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgba（0,0,0,0.8）；
溢出x：隐藏；
填充顶部：65px；
左边距：0px；
文本对齐：居中；
过渡：.7s；
}
.侧导航a{
填充：45px 8px 20px 32px；
文字装饰：无；
字号：28px；
颜色：白色；
显示：块；
过渡：0.7s；
}
.侧导航a:悬停{
颜色：rgb（155155155）；
}
.汉堡系列{
字体大小：30px；
光标：指针；
位置：固定；
顶部：44px；
右：70px；
}
.标志{
字体系列：“Oswald”，无衬线；
填充：40px 0px 0px 40px；
文字装饰：无；
字号：26px；
颜色：黑色；
显示：块；
位置：固定；
z指数：1；
顶部：5px；
}
.sidenav.closebtn{
颜色：黑色；
光标：指针；
位置：绝对位置；
顶部：-5px；
右：60px；
字体大小：46px；
}
.标题-2{
文本转换：大写；
文本对齐：居中；
位置：相对位置；
顶部：9.5雷姆；
右：15雷姆；
字号：18px；
}
.表格包装{
文本对齐：居中；
保证金上限：10雷姆；
}
.form wrap>输入{
字体系列：“鸬鹚加拉蒙德”；
边缘顶部：20px；
填充物：5px；
字体大小：16px；
边框：1px实心浅灰色；
背景:#fcfc；
}
#姓名、姓氏、电子邮件、电话号码{
宽度：350px；
高度：40px；
}
#自定义文本区域{
字体系列：“鸬鹚加拉蒙德”；
填充：10px；
页边顶部：1rem；
宽度：707px；
高度：230像素；
字体大小：16px；
背景:#fcfc；
边框：1px实心浅灰色；
}
#提交{
背景：黑色；
边框：1px纯黑；
字号：19px；
文本对齐：左对齐；
颜色：白色；
宽度：120px；
高度：45px；
保证金权利：29.3雷姆；
边缘顶部：25px；
}
#提交：悬停{
背景：rgb（53,53,53）；
过渡：.5s；
}
/*输入：悬停，#自定义文本区域：悬停{
边框：1px纯红；
颜色：红色；
过渡：放松；
}*/
.输入无效{
边框：1px纯红；
颜色：红色；
过渡：放松；
}
.警告{
字体系列：“鸬鹚加拉蒙德”；
颜色：红色；
位置：相对位置；
顶部：-36px；
左：-3rem；
显示：无；
}

天竺葵
☰
联系方式






必须填写带*的所有字段
您的fiddle不会阻止默认设置，因为您没有将事件对象传递给函数。。。虽然我不知道为什么您首先创建一个单独的函数来执行
e.preventDefault（）
@PatrickEvans，或者创建一个函数来为该matterNote添加eventListener，但是
preventDefault
的定义中也有一个输入错误。它可能应该是
preventDefault
或者，当您使用
standardvern
时，这里的代码与小提琴不匹配。这里的代码
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();
        }


    });
};

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