【发布时间】：2018-09-17 15:46:30
【问题描述】：
我正在制作注册表；如果某个字段未通过验证测试，则进行验证时，例如-如果我没有输入名字，它会发出警报，但随之而来的是它会为所有那些为空的字段发出警报。我只想将控件发送到验证测试失败的那个字段。在这种情况下，名字。这是我的代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Assignment-2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body style="background-color:powderblue;">
<h3>
<marquee style="color : Green;">Please Fill all the details correctly</marquee>
</h3><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="align-middle">Registration Form</h3>
</div>
<div class="col-sm-12 col-md-12">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="fName">First Name:</label>
<input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
</div>
<div class="col-sm-12 col-md-6">
<label for="lName">Last Name:</label>
<input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Email:</label>
<input type="email" class="form-control" id="confirm_email" placeholder="type again">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Password:</label>
<input type="Password" class="form-control" id="password" placeholder="">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Password:</label>
<input type="Password" class="form-control" id="confirm_password" placeholder="">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="ml-sm-3 ml-md-3"></div>
<label for="Gender">Gender:</label>
<div class="row">
<div class="ml-sm-3 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Male">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Male" checked>Male
</label>
</div>
<div class="ml-sm-4 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Female">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Female">Female
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<label for="D.O.R">Date of Registration:</label><br>
<input type="date" class="form-control" id="date" placeholder="23/07/2018">
<p id="date"></p>
<script>
function myFunction() {
var x = document.getElementById("Date").value;
document.getElementById("Date").innerHTML = x;
}
</script>
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkbox" value="check">
I Accept all Terms and Conditions
</label>
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-12">
<button id="but" onclick="return btnvalidate();">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2"></div>
</div>
</div>
<script>
function btnvalidate() {
var fname = document.getElementById("firstname").value
if (fname.length == 0) {
alert('First Name cannot be Empty');
}
var lname = document.getElementById("lastname").value
if (lname.length == 0) {
alert('Last Name cannot be Empty');
}
var email = document.getElementById("email").value
if (email.length == 0) {
alert('email cannot be empty!')
}
var confirm_email = document.getElementById("confirm_email").value
if (confirm_email.length == 0) {
alert('You NEED to confirm the email!')
}
if (email != confirm_email) {
alert('Email Not Matching! Try again');
}
var password = document.getElementById("password").value
if (password.length == 0) {
alert('password cannot be empty!')
}
var confirm_password = document.getElementById("confirm_password").value
if (password != confirm_password) {
alert('Password Not Matching! Try again');
}
var date = document.getElementById("date").value
if (date.length == 0) {
alert('Date of Registeration cannot be empty!');
}
alert($("input[name='optradio']:checked").val());
if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
}
}
</script>
</body>
</html>【问题讨论】：
-
换句话说，您希望第一个失败的输入字段获得焦点？如果是，请使用以下内容： document.getElementById("myAnchor").focus();为此，您必须知道失败元素的 ID。
-
请注意，您在示例中包含了两次 jQuery - 如果这是您的“真实”代码正在执行的操作，那将会导致问题。
-
如果您的意思是，如果任何验证失败，您想停止进一步验证。您可以添加“返回”。
if (fname.length == 0) { alert('First Name cannot be Empty'); return; } -
对于
first name、last name和email，您可以使用required。<script>标记中可能还有一些其他检查 -
作为旁注，
marquee元素已经被弃用了一段时间，大多数浏览器不再支持它。
标签： javascript jquery html bootstrap-4