时间戳

首页 > 解决方案 > 我正在尝试使用 javascript 验证多个 HTML 表单输入，并将 css 更改为无效输入，最好的方法是什么？

javascript - 我正在尝试使用 javascript 验证多个 HTML 表单输入，并将 css 更改为无效输入，最好的方法是什么？

问题描述

我正在尝试验证 HTML 表单，尝试检查是否填写了答案，并且电子邮件是实际的电子邮件地址。我想在所有字段都有效时继续。当某些字段无效时，将css更改为另一个类（因此变为红色表示错误。）

我试图分别验证每个输入，但我相信应该有一个更简单的方法。有人可以给我看看吗？

当前的 HTML：

<div class="form-group" id="stage1">
   <div class="row">


        <input type="text" id="firstname" class="form-control" placeholder="Firstname*">  
        <input type="text" id="lastname" class="form-control" placeholder="Lastname*">
        <input type="email" id="email" class="form-control" placeholder="E-mail*">

        <input type="text" id="regnr" class="form-control" placeholder="Registration number">


    </div>
</div

我不能使用 HTML 默认验证，因为我创建了一个多步骤表单。

提前致谢，

布兰登

标签： javascripthtml

解决方案

您可以根据它们的类型进行验证，所以我认为您将有两个功能，一个用于电子邮件，另一个用于文本字段。例如：

if(textValidation() && emailValidation()){
  submit()
}

emailValidation(){
  return email ? true : false
}

textValidation(){
  return text ? true : false
}

推荐阅读