如何验证具有多个选项卡的表单？
Posted
技术标签:
【中文标题】如何验证具有多个选项卡的表单？【英文标题】：How do I validate form with multiple tabs? 【发布时间】：2020-07-02 05:37:40 【问题描述】：所以我有一个包含三个标签的注册表单。第一个选项卡是用户可以输入email、password 和confirm password 的地方，第二个选项卡是他们的详细信息，例如地址、手机号码、状态等，第三个选项卡是用户必须同意条款和条件的地方并提供数字签名。
我可以打开任一选项卡，但是我喜欢不填写某些字段，但是当我单击注册按钮（在第三个选项卡中）时，它应该执行客户端验证以确保所有字段都已键入并且密码/确认密码匹配。例如，任何未显示的字段都应通知用户。
代码：
<div>
<div class="card border-rounded-0 bg-bujishu-gold guests-card">
<h5 class="text-center bujishu-gold form-card-title">Registration</h5>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item active">
<a class="nav-link register-tab-active active" id="home-tab" data-toggle="tab" href="#registration" role="tab" aria-controls="registration" aria-selected="true">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link register-tab-active" id="profile-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Information</a>
</li>
<li class="nav-item">
<a class="nav-link register-tab-active" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="agreement" aria-selected="false">Agreement</a>
</li>
</ul>
<div class="card-body">
<!-- Dealer Registration Form -->
<form method="POST" action=" route('register') ">
@csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
@foreach($states as $state)
<option class="text-capitalize" value=" $state->id "> $state->name </option>
@endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
我尝试在输入上使用required，但似乎没有做任何事情。在我看来，jQuery 似乎是唯一剩下的选择，但我想知道有没有更简单的方法来实现这一点？
【问题讨论】：
我认为你不应该允许用户在没有验证第一步数据的情况下进入下一步。 查看 validate.js validatejs.org 老实说，您应该使用服务器端代码进行验证，因为可以禁用 JS。 我的意思是我想在客户端和服务器端进行验证。现在我首先在客户端工作。 @hussain.codes 是的，我该怎么做？ 【参考方案1】：我正在使用手机，因此您的代码基本上是不可读的，因为手机格式很奇怪。你可以做的是，当你切换标签时，你实际上只是让一些隐藏的元素显示，一些元素隐藏在同一个表单中。这在 javascript 中很容易做到。然后你可以将它们全部设置为 required 和 tada。不是 100% 确定这是否有效，但我认为它会。确保使用 html hidden 属性而不是 css display none。
【讨论】：
问题是上面也有注册表单【参考方案2】：这是一个使用 JQuery 验证密码匹配的示例。
我正在使用.keyup(function()) 设置一个函数，然后我正在设置一个条件来检查每个 id 标签的值，如果它们不匹配，我将返回一条带有红色和 bg 的错误消息给不匹配的用户警告，我是还禁用了提交按钮，因此他们在解决问题之前无法提交表单。然后，如果有匹配项，我将返回一条带有绿色和 bg 的成功消息，并删除 disabled 属性以便可以提交表单。
重要提示： 对数据库或登录的验证表单应在后端完成，而不是在前端完成。前端应仅用作验证的第一步。请记住，可以禁用 JS 并使您的验证变得毫无价值。使用 php 或 ASP 进行最终验证！
$("#password").keyup(function() // we fire on the keyup event
//compare the values of the two passwords using .val() and their ids
if ($("#password").val() != $("#confirm_password").val())
// if they do not match we add an error message to the div #msg
// we also remove potential latent classes and add new class to get warning font color and bg color
$("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger");
// disable and style the submit button using .prop() and remove/addClass()
$("#enter").prop('disabled', true);
$("#enter").removeClass("alert-success").addClass("alert alert-danger");
else
// On success we add success msg and switch styles to note success in green
$("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
// Turn the submit back on by removing the disabled attr
$("#enter").prop('disabled', false);
$("#enter").removeClass("alert-danger").addClass("alert alert-success");
);
//rinse and repeat for the #confirm-password tag
$("#confirm_password").keyup(function()
if ($("#password").val() != $("#confirm_password").val())
$("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#enter").prop('disabled', true);
$("#enter").removeClass("alert-success").addClass("alert alert-danger");
else
$("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
$("#enter").prop('disabled', false);
$("#enter").removeClass("alert-danger").addClass("alert alert-success");
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<label for="usr_password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" id="password" type="password" name="usr_password" placeholder="PASSWORD" required>
</div>
<label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input class="form-control" id="confirm_password" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD" required>
</div>
<div id="msg"></div>
<input type="submit" value="Enter Password" id="enter">【讨论】：
你的代码很混乱。我觉得我应该验证每个页面 我强烈建议您在网上搜索您需要的每个验证的示例，并了解它是如何工作的。非常直接，获取输入的 val，将其与 reg ex 或其他规则进行比较，然后让用户知道他们需要做什么来修复和/或禁用/启用元素（如果需要）。以上是关于如何验证具有多个选项卡的表单？的主要内容，如果未能解决你的问题，请参考以下文章