我试图通过三种不同的方式来实现这一点，但似乎都不起作用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
// method 1
// window.scrollTo({top: 0, behavior: 'smooth'});
// method 2
// window.scrollTo(0, 0);
// method 3
// $("html, body").animate({ scrollTop: "2000" });
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function recaptchaCallback() {
$('#contact-submit').removeAttr('disabled');
}
</script>
这是我表格的代码：
<form action="" method="POST" class="needs-validation d-flex justify-content-center padding-t-56 padding-b-56" data-abide novalidate>
<div class="application-body">
<div class="tab d-flex flex-wrap justify-content-between padding-t-16 padding-x-16 margin-b-56">
<h3 class=" margin-t-0 col-12">Contact details</h3>
<div class="col-12 col-md-5">
<!-- Full name -->
<div class="form-group">
<label class="" for="applicantName" id="applicantNameLabel">Applicant’s or nominee’s full name*</label>
<input type="text" class="form-control" id="applicantName" name="applicantName" placeholder="Please enter your full name." aria-labelledby="applicantNameLabel" <?php if ( isset( $applicantName ) ) echo 'value="'.$applicantName.'"'; ?> required/>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<!-- email -->
<div class="form-group">
<label class="" for="applicantEmail" id="applicantEmailLabel">Applicant’s or nominee’s email*</label>
<input type="email" class="form-control" id="applicantEmail" name="applicantEmail"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" required placeholder="Please enter your email." aria-labelledby="applicantEmailLabel" <?php if ( isset( $applicantEmail ) ) echo 'value="'.$applicantEmail.'"'; ?>/>
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<!-- phone number ^d{3}-d{3}-d{4}$ / [0-9]{10} -->
<div class="form-group">
<label class="" for="applicantPhone" id="applicantPhoneLabel">Applicant’s or nominee’s phone number*</label>
<input type="tel" class="form-control" id="applicantPhone" pattern="^d{3}-d{3}-d{4}$" name="applicantPhone" placeholder="Please enter your phone number." aria-labelledby="applicantPhoneLabel" required <?php if ( isset( $applicantPhone ) ) echo 'value="'.$applicantPhone.'"'; ?>/>
<div class="invalid-feedback">Please enter a valid phone number, including area code. Enter digits only. Try this format: xxx-xxx-xxxx</div>
</div>
</div>
<div class="col-12 col-md-5">
<!-- address -->
<div class="form-group">
<label class="" for="address" id="addressLabel">Applicant’s or nominee’s address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Please enter your address." aria-labelledby="addressLabel" <?php if ( isset( $address ) ) echo 'value="'.$address.'"'; ?> />
<div class="invalid-feedback">Please enter your address.</div>
</div>
<!-- city -->
<div class="form-group">
<label class="" for="city" id="cityLabel">Applicant’s or nominee’s city*<span id="req"></span></label>
<input type="text" class="form-control" id="city" name="city" placeholder="Please enter your city." aria-labelledby="cityLabel" required <?php if ( isset( $city ) ) echo 'value="'.$city.'"'; ?> />
<div class="invalid-feedback">Please enter your city.</div>
</div>
<!-- province -->
<div class="form-group">
<label class="" for="province" id="provinceLabel">Applicant’s or nominee’s province</label>
<select class="custom-select" id="province" name="province" aria-labelledby="provinceLabel">
<option value="AB" <?php if ( isset( $province ) && $province == 'AB' ) echo 'selected="selected"'; ?>>Alberta</option>
<option value="BC" <?php if ( isset( $province ) && $province == 'BC' ) echo 'selected="selected"'; ?>>British Columbia</option>
<option value="MB" <?php if ( isset( $province ) && $province == 'MB' ) echo 'selected="selected"'; ?>>Manitoba</option>
<option value="NB" <?php if ( isset( $province ) && $province == 'NB' ) echo 'selected="selected"'; ?>>New Brunswick</option>
<option value="NL" <?php if ( isset( $province ) && $province == 'NL' ) echo 'selected="selected"'; ?>>Newfoundland and Labrador</option>
<option value="NS" <?php if ( isset( $province ) && $province == 'NS' ) echo 'selected="selected"'; ?>>Nova Scotia</option>
<option value="ON" <?php if ( isset( $province ) && $province == 'ON' ) echo 'selected="selected"'; ?>>Ontario</option>
<option value="PE" <?php if ( isset( $province ) && $province == 'PE' ) echo 'selected="selected"'; ?>>Prince Edward Island</option>
<option value="QC" <?php if ( isset( $province ) && $province == 'QC' ) echo 'selected="selected"'; ?>>Quebec</option>
<option value="SK" <?php if ( isset( $province ) && $province == 'SK' ) echo 'selected="selected"'; ?>>Saskatchewan</option>
<option value="NT" <?php if ( isset( $province ) && $province == 'NT' ) echo 'selected="selected"'; ?>>Northwest Territories</option>
<option value="NU" <?php if ( isset( $province ) && $province == 'NU' ) echo 'selected="selected"'; ?>>Nunavut</option>
<option value="YT" <?php if ( isset( $province ) && $province == 'YT' ) echo 'selected="selected"'; ?>>Yukon</option>
</select>
<div class="invalid-feedback">
Select a province.
</div>
</div>
<!-- postal code -->
<div class="form-group">
<label class="" for="postalCode" id="postalCodeLabel">Applicant’s or nominee’s postal code</label>
<input type="text" class="form-control" id="postalCode" name="postalCode" placeholder="Please enter your postal code." aria-labelledby="postalCodeLabel" <?php if ( isset( $postal_code ) ) echo 'value="'.$postal_code.'"'; ?> />
<div class="invalid-feedback">Please enter your postal code.</div>
</div>
</div>
</div>
<div class="col col-12 tr-faq">
</div>
<div class="col-12 col margin-t-56 margin-b-32 padding-x-16">
<h5>If you’re nominating someone else:</h5>
<!-- Full name -->
<div class="form-group">
<label class="" for="nominatorName" id="nominatorNameLabel">Your full name</label>
<input type="text" class="form-control" id="nominatorName" name="nominatorName" placeholder="Please enter your full name." aria-labelledby="nominatorNameLabel" <?php if ( isset( $nominatorName ) ) echo 'value="'.$nominatorName.'"'; ?>/>
<div class="invalid-feedback">Please enter your name</div>
</div>
<!-- email -->
<div class="form-group">
<label class="" for="nominatorEmail" id="nominatorEmailLabel">Email</label>
<input type="email" class="form-control" id="nominatorEmail" name="nominatorEmail"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" placeholder="Please enter your email." aria-labelledby="nominatorEmailLabel" <?php if ( isset( $nominatorEmail ) ) echo 'value="'.$nominatorEmail.'"'; ?>/>
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<!-- phone number -->
<div class="form-group">
<label class="" for="nominatorPhone" id="nominatorPhoneLabel">Phone number</label>
<input type="tel" class="form-control" id="nominatorPhone" pattern="[0-9]{10}" name="nominatorPhone" placeholder="Please enter your phone number." aria-labelledby="nominatorPhoneLabel" <?php if ( isset( $nominatorPhone ) ) echo 'value="'.$nominatorPhone.'"'; ?>/>
<div class="invalid-feedback">Please enter a valid phone number, including area code. Enter digits only.</div>
</div>
</div>
<div class="col col-12 tr-faq">
</div>
<!-- Why you are a reason of face of wellness -->
<div class="tab flex-column margin-t-56 margin-b-32 padding-x-16">
<div class="form-group">
<label class="" for="details" id="detailsLabel">The reason why you or your nominee is a face of wellness*:</label>
<textarea class="form-control" id="details" name="details" placeholder="Tell us why you or your nominee is a face of wellness." aria-labelledby="detailsLabel" required><?php if ( isset( $details ) ) echo $details; ?></textarea>
<div class="invalid-feedback">Please tell us why you or your nominee is a face of wellness.</div>
</div>
<div class="form-group captcha-field">
<h4 class="margin-t-48 margin-b-0">Security check</h4>
<p>Protecting your information is our number one priority. Before we send can submit your question to our team, we just need to check that you are not a robot. Click the checkbox on the reCAPTCHA form below to confirm you are human and we will be in touch shortly.</p>
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="<?php echo $sitekey; ?>"> </div>
<?php
if ($captchaError ) {
echo '<div class="captchaError">'.$captchaError.'</div>';
} // if ( !empty( $errors ) )
// if ($recaptchaError ) {
// echo '<div class="captchaError">'.$recaptchaError.'</div>';
// }
?>
</div>
<p class="padding-r-24">You will receive a confirmation message to the email you provided in your application shortly. To complete your application, please respond to the email with any relevant imagery or video that supports your submission (if applicable).</p>
<input type="submit" name="submitted" class="btn primary-btn contact-submit-button" id="contact-submit" aria-labelledby="submit button" disabled>
<!--<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" class="btn secondary-btn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" class="btn secondary-btn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div> -->
</div>
</form>
我还尝试实现了这一点：Bootstrap 4：添加一个"；滚动到第一个无效字段"；到老头子'；t〃；提交"；如果我的代码中的脚本无效，那也不起作用。
如果有人能为我指明正确的方向，我将不胜感激。
您发布的是html代码，而不是渲染的html，因此为了示例起见，我删除了所有php标记和提交按钮。
但正如您所看到的，对scrollIntoView()的调用确实有效，至少在这里是这样。我不知道为什么它会对你失败，除非你正在对一个它找不到或可能已经"失败"的元素采取行动；name mangled"；在渲染时。
其他需要考虑的事项
考虑回发。
如果您正在验证客户端。然后确保在所有字段都通过验证之前不要回发。在这种情况下，scrollIntoView应该可以。
如果在服务器上进行任何验证，那么您将不得不等待页面呈现，并在加载时将失败的字段id提供给您的scrollIntoView函数
修改为模拟回发操作
注意在body标记中添加了onload处理程序。所以它是这样工作的：
- 用户点击提交
- 在服务器上进行验证检查
- 第一次失败时，设置隐藏字段值
- 页面渲染和
onload函数checkValidation查看隐藏字段
function checkValidation() {
let elemID = document.getElementById("_FAILED_VALIDATION").value;
if (elemID !== "NONE") {
let options = {
behavior: "smooth",
block: "center"
}
document
.getElementById(elemID)
.scrollIntoView(options);
}
}button#Example {
background-color: pink;
margin: 10px;
}<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body onload="checkValidation()">
<!-- <button id="Example" type=button onclick="foo(event)">Scroll Other Nominee Email Into View</button> -->
<!-- hidden field is either "NONE" or the id of the field that failed validation -->
<input type="hidden" id="_FAILED_VALIDATION" value="nominatorEmail">
<form action="" class="needs-validation d-flex justify-content-center padding-t-56 padding-b-56" data-abide novalidate>
<div class="application-body">
<div class="tab d-flex flex-wrap justify-content-between padding-t-16 padding-x-16 margin-b-56">
<h3 class=" margin-t-0 col-12">Contact details</h3>
<div class="col-12 col-md-5">
<!-- Full name -->
<div class="form-group">
<label class="" for="applicantName" id="applicantNameLabel">Applicant’s or nominee’s full name*</label>
<input type="text" class="form-control" id="applicantName" name="applicantName" placeholder="Please enter your full name." aria-labelledby="applicantNameLabel" required/>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<!-- email -->
<div class="form-group">
<label class="" for="applicantEmail" id="applicantEmailLabel">Applicant’s or nominee’s email*</label>
<input type="email" class="form-control" id="applicantEmail" name="applicantEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" required placeholder="Please enter your email." aria-labelledby="applicantEmailLabel" />
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<!-- phone number ^d{3}-d{3}-d{4}$ / [0-9]{10} -->
<div class="form-group">
<label class="" for="applicantPhone" id="applicantPhoneLabel">Applicant’s or nominee’s phone number*</label>
<input type="tel" class="form-control" id="applicantPhone" pattern="^d{3}-d{3}-d{4}$" name="applicantPhone" placeholder="Please enter your phone number." aria-labelledby="applicantPhoneLabel" required />
<div class="invalid-feedback">Please enter a valid phone number, including area code. Enter digits only. Try this format: xxx-xxx-xxxx</div>
</div>
</div>
<div class="col-12 col-md-5">
<!-- address -->
<div class="form-group">
<label class="" for="address" id="addressLabel">Applicant’s or nominee’s address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Please enter your address." aria-labelledby="addressLabel" />
<div class="invalid-feedback">Please enter your address.</div>
</div>
<!-- city -->
<div class="form-group">
<label class="" for="city" id="cityLabel">Applicant’s or nominee’s city*<span id="req"></span></label>
<input type="text" class="form-control" id="city" name="city" placeholder="Please enter your city." aria-labelledby="cityLabel" required />
<div class="invalid-feedback">Please enter your city.</div>
</div>
<!-- province -->
<div class="form-group">
<label class="" for="province" id="provinceLabel">Applicant’s or nominee’s province</label>
<select class="custom-select" id="province" name="province" aria-labelledby="provinceLabel">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
<div class="invalid-feedback">
Select a province.
</div>
</div>
<!-- postal code -->
<div class="form-group">
<label class="" for="postalCode" id="postalCodeLabel">Applicant’s or nominee’s postal code</label>
<input type="text" class="form-control" id="postalCode" name="postalCode" placeholder="Please enter your postal code." aria-labelledby="postalCodeLabel" />
<div class="invalid-feedback">Please enter your postal code.</div>
</div>
</div>
</div>
<div class="col col-12 tr-faq">
</div>
<div class="col-12 col margin-t-56 margin-b-32 padding-x-16">
<h5>If you’re nominating someone else:</h5>
<!-- Full name -->
<div class="form-group">
<label class="" for="nominatorName" id="nominatorNameLabel">Your full name</label>
<input type="text" class="form-control" id="nominatorName" name="nominatorName" placeholder="Please enter your full name." aria-labelledby="nominatorNameLabel" />
<div class="invalid-feedback">Please enter your name</div>
</div>
<!-- email -->
<div class="form-group">
<label class="" for="nominatorEmail" id="nominatorEmailLabel">Email</label>
<input type="email" class="form-control" id="nominatorEmail" name="nominatorEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" placeholder="Please enter your email." aria-labelledby="nominatorEmailLabel" />
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<!-- phone number -->
<div class="form-group">
<label class="" for="nominatorPhone" id="nominatorPhoneLabel">Phone number</label>
<input type="tel" class="form-control" id="nominatorPhone" pattern="[0-9]{10}" name="nominatorPhone" placeholder="Please enter your phone number." aria-labelledby="nominatorPhoneLabel" />
<div class="invalid-feedback">Please enter a valid phone number, including area code. Enter digits only.</div>
</div>
</div>
<div class="col col-12 tr-faq">
</div>
<!-- Why you are a reason of face of wellness -->
<div class="tab flex-column margin-t-56 margin-b-32 padding-x-16">
<div class="form-group">
<label class="" for="details" id="detailsLabel">The reason why you or your nominee is a face of wellness*:</label>
<textarea class="form-control" id="details" name="details" placeholder="Tell us why you or your nominee is a face of wellness." aria-labelledby="detailsLabel" required></textarea>
<div class="invalid-feedback">Please tell us why you or your nominee is a face of wellness.</div>
</div>
<div class="form-group captcha-field">
<h4 class="margin-t-48 margin-b-0">Security check</h4>
<p>Protecting your information is our number one priority. Before we send can submit your question to our team, we just need to check that you are not a robot. Click the checkbox on the reCAPTCHA form below to confirm you are human and we will
be in touch shortly.</p>
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey=""> </div>
</div>
<p class="padding-r-24">You will receive a confirmation message to the email you provided in your application shortly. To complete your application, please respond to the email with any relevant imagery or video that supports your submission (if applicable).</p>
</div>
</form>
<body>