我有一個用戶發現很難使用的表單（使用 Bootstrap 樣式）。作為深入研究表單 UX 的一部分，我試圖在用戶鍵入欄位不正確時提示他們；在他們提交表單之前，點擊服務器驗證，然后放棄并電話支持。
我遇到了我正在作業的這個答案https://stackoverflow.com/a/60452385/1375567。我遇到的問題是，當我通過服務器端驗證將頁面回傳給用戶時，我設定了無效反饋訊息（請參見下面的代碼片段）。當 JS 驗證運行時，它不會顯示任何訊息，因為沒有通過 PHP 回顯設定變數。
我想做的是在輸入上使用資料屬性（或類似的東西）作為無效反饋的文本。
這可能與代碼？
表單片段
<div class="form-group">
<label class="w-100" for="firstName">Participant's First Name <span class="float-right text-danger">[required]</span></label>
<input
type="text"
id="firstName"
name="firstName"
class="form-control mb-0 <?php echo (!empty($data['pageData']['firstName_error'])) ? 'is-invalid' : ''; ?>"
value="<?php echo $data['pageData']['firstName']; ?>"
required
data-reqMsg = "This field is required"
data-regexMsg = "Some characters are not permitted"
/>
<div class="invalid-feedback"><?php echo (empty($data['pageData']['firstName_error'])) ? '' : $data['pageData']['firstName_error']; ?></div>
</div>
jQuery 代碼
<script>
$(document).ready(function() {
(function() {
'use strict';
window.addEventListener('load', function() {
// fetch all the forms we want to apply custom style
var inputs = document.getElementsByClassName('form-control')
// loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
//Find the data attribute, and use that as the validate message
//Something like.... $(input).text('test') ?????
} else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})()
});
</script>
做一些挖掘我可以得到資料屬性，input.getAttribute("data-req")但我現在需要將無效反饋內容的值設定為屬性
uj5u.com熱心網友回復：
知道了！我可以使用 getAttribute() https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute來獲取錯誤訊息欄位的 ID。然后，我可以使用 JQuery 將其文本設定為資料屬性之一中的訊息集。
<script>
$(document).ready(function() {
(function() {
'use strict';
window.addEventListener('load', function() {
// fetch all the forms we want to apply custom style
var inputs = document.getElementsByClassName('form-control')
// loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
var el = input.getAttribute("data-errId")
$('#' el).text(input.getAttribute("data-errMsg"));
$('#' el).removeClass('d-none');
}
else {
input.classList.add('is-valid')
var el = input.getAttribute("data-valId")
$('#' el).text(input.getAttribute("data-valMsg"));
$('#' el).removeClass('d-none');
}
}, false);
});
}, false);
})()
});
</script>
然后在html中
<div class="form-group">
<label class="w-100" for="firstName">Your First Name <span class="float-right text-info">[required]</span></label>
<input
type="text"
name="firstName"
id="firstName"
class="form-control mb-0 <?php echo (!empty($data['pageData']['firstName_error'])) ? 'is-invalid' : ''; ?>"
value="<?php echo $data['pageData']['firstName']; ?>"
data-errMsg = "There is a problem with the data you have entered in the field or it is required, please review before continuing"
data-valMsg = "This passes validation"
data-errId = "firstName_errMsg"
data-valId = "firstName_msg"
pattern = "[a-zA-Z\s]*"
required
/>
<span class="invalid-feedback"><?php echo (empty($data['pageData']['firstName_error'])) ? '' : $data['pageData']['firstName_error']; ?></span>
<div id="firstName_errMsg" class="invalid-feedback d-none"></div>
<div id="firstName_msg" class="valid-feedback d-none"></div>
<small class="form-text text-muted mt-0">You may only use letters and a space in this field</small>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496902.html