javascript - jquery-单击按钮时验证特定元素
问题描述
我有一个处理注册的表格，如下所示：
我想验证每个选项卡而不是整个表单，因此用户必须在移动到下一个选项卡之前填写第一个选项卡。我尝试使用validator.element( "email" )但它根本没有响应。
这是我的代码：
<form method="POST" action="{{ route('register') }}" id="register-form">
@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 bjsh-btn-gradient" id="next-btn">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" required 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>
脚本（损坏）：
var validator = $( "#register-form" ).validate({
rules: {
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 8,
},
password_confirmation:{
required: true,
minlength: 8,
equalTo: "#password"
}
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Password does not match"
}
});
$('#next-btn').click(function() {
var validator = $( "#myform" ).validate();
validator.element("email");
});
考虑到我需要在具有提交按钮的最终选项卡之前验证每个选项卡，我该如何使其工作？
解决方案
我为示例代码使用了 bootstrap 4 css 样式，可以通过将您自己的 css 添加到 JQuery 类函数来轻松更改。
我使用了属性和类的切换以及 msg 字段来显示示例的错误和成功消息。具体来说，我正在禁用输入字段进行重点输入，直到完成进行字段锁定为止。一旦密码匹配完成，提交按钮就会解锁。
2020 年 3 月 22 日更新： 增加了密码的最低要求。 您也可以在密码部分添加所需的字符，只需在 JQuery 代码的密码和密码确认部分添加一个匹配字符的正则表达式。
重要提示：前端验证应该只用于真正的格式化，大部分验证应该在后端完成！
$("#confirm_password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($("#password").val() != $(this).val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched, you can submit the form now").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($(this).val() != $("#confirm_password").val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#usr_email").change(function() {
var sEmail = $(this).val();
if ($.trim(sEmail).length == 0) {
$("#msg").html("Email is mandatory").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
} else if (validateEmail(sEmail)) {
$("#msg").html("Your Email is valid, now you can continue").removeClass("alert-danger").addClass("alert alert-success");
$("#password").prop('disabled', false);
$("#confirm_password").prop('disabled', false);
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Invalid Email address").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
}
});
// Function that validates email address through a regular expression.
function validateEmail(sEmail) {
var filter = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
if (filter.test(sEmail)) {
return true;
} else {
return false;
}
}<!-- Bootstrap 4-->
<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>
<form method="post">
<label for="usr_email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="usr_email" name="usr_email" placeholder="EMAIL" required>
</div>
<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>
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<div class="col-sm-6" id="msg"></div>推荐阅读
- chatbot - 如何让聊天机器人从谷歌会议中捕获音频？
- java - MongoDB 和 Spring：如何在一个存储库查询中正确查询两个字段？
- sql - 具有多个列的 Oracle SQL 查询，使用相同的子查询和 OR
- tensorflow - 如何为 tensorflow 2.0+ 中的分类列创建嵌入（尤其是令牌到 Id 的映射）？
- php - 只有 Codeigniter 回调函数正在工作，其余验证规则被忽略
- sql-server - 本地数据库的 SQL 连接字符串
- angular - 如果我两次单击相同的锚点，使用片段哈希的角度路由将不起作用
- python - 如果嵌套列表包含某个值，则从列表中删除嵌套列表
- javascript - Paperjs - 无法清除光栅
- android-studio - Android Studio 中响应式设计的最佳方式