如何在 bootstrap 5 中發布帶有表單驗證的 ajax？
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
我有一個很大的問題。有人可以幫助我嗎？
uj5u.com熱心網友回復：
上面bootstrap檔案提供的starter代碼使用了checkValidity()JavaScript Constraint Validation API的方法來驗證表單。
HTMLInputElement.checkValidity() 方法回傳一個布林值，指示元素值的有效性。如果該值無效，則此方法還會在元素上觸發 invalid 事件。
如果驗證成功，您可以發出ajax請求，如下所示，
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}else{
//make your ajax request here
}
這是一個使用 JavaScript Fetch API 和FormData API 的ajax 請求示例
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}else{
try {
const postData = new FormData(form)
const response = await fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
});
//Response from server
const data = await response.json();
}catch(e){
//handle error
console.log(e)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400039.html
標籤：javascript 形式 推特引导