我有以下代碼：
//Contact Form Redirection
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).finally(() => {
window.location = "thankyou.html";
});
}
form.addEventListener("submit", handleSubmit)
//Contact Form Error Animation
document.querySelector('form').addEventListener('submit', function (e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function (f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function () { f.style.animation = "unset"; }, 820);
} else {
f.style.borderColor = "initial";
}
})
if (!isValid) {
e.preventDefault();
}
})/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xdobkgny" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>表單運行良好，只是在欄位中沒有輸入和拋出錯誤時重定向到頁面。基本上，當輸入欄位中沒有輸入任何內容時，它不應該將我重定向到頁面，而thankyou.html即使輸入欄位中沒有任何內容，它也會將我重定向到。
請參閱此剪輯以獲取我得到的輸出：
https://watch.screencastify.com/v/BSkuGitl5ACHDWEvGziM
我怎樣才能避免這種情況？
更新
https://watch.screencastify.com/v/RkgLmLAGztVduI26LV55
影片在一個輸入欄位上不起作用，我也希望洗掉“請填寫此欄位”訊息并且只有搖動影片
更新2
顯然，這是將回應發送到電子郵件的 JS 代碼，所以您可以使用它來更改您的代碼嗎？
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).finally(() => {
window.location = "thankyou.html";
});
}
myform.firstname.oninvalid = badEntrie
myform.lastname.oninvalid = badEntrie
myform.email.oninvalid = badEntrie
myform.subject.oninvalid = badEntrie
function badEntrie({ target }) {
target.classList.add('shakingErr')
setTimeout(() => { target.classList.remove('shakingErr') }, 820)
}
form.addEventListener("submit", handleSubmit)
uj5u.com熱心網友回復：
如果由于某種原因你想保留novalidate你可以改為回圈你的元素來驗證它們（有更簡單的方法，但我不確定你是否正在使用任何庫）。
你可以這樣做：
let valid = true
validateInputs() {
var elements = document.querySelectorAll("#my-form input[type=text]")
for (var i = 0, element; element = elements[i ];) {
if (element.value === "")
valid = false
break
}
并將其用作您現在沒有意義的狀態（感謝novalidate）
uj5u.com熱心網友回復：
看起來您的表單元素具有“novalidate”屬性。
uj5u.com熱心網友回復：
我看到的問題是您的狀態變數為空。my-form-status在您的 dom 中添加帶有 id 的元素，然后您的代碼將起作用。
uj5u.com熱心網友回復：
首先，您需要決定要驗證哪些欄位和哪些內容。我為您撰寫了一個簡單的示例函式，如何檢查空欄位。（對于名字）
var form = document.getElementById("my-form");
var AllFieldStatus = false;
var statusName = false;
var statusLastName = false;
var statusEmail = false;
var statusTextfield = false;
function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
//// Validation on empty field
statusName = checkNameField(document.getElementById("firstname"), statusName);
/// the same operation with others fields
if (statusName === false) {
alert("Field name emty");
return
} else {
console.log("Name not empty");
}
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
status.innerHTML = "Thanks for your submission!";
form.reset()
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
function checkNameField(field, statusCheck) {
el = field.value;
if (el.length > 0) {
return true;
}
}/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br />Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xdobkgny" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>在發送資料之前，您需要檢查每個欄位的空狀態。我摔倒
statusName = true;
statusLastName = true;
statusEmail = true;
statusTextfield = true;
你將發送否則回傳函式
uj5u.com熱心網友回復：
試試看：
const form = document.forms.myform
;
form.onsubmit = e =>
{
e.preventDefault()
let data = Object.fromEntries( new FormData(form).entries())
// for test
console.clear()
console.log('data', JSON.stringify(data))
let validationOK = true
for (let entrie in data)
{
if (!form[entrie].checkValidity())
{
validationOK = false
form[entrie].classList.add('shakingErr')
setTimeout(() => { form[entrie].classList.remove('shakingErr') }, 820)
}
}
if (validationOK)
{
fetch( form.action,
{ method : form.method
, body : data
, headers : { Accept : 'application/json' }
})
.finally(() => { window.location = "thankyou.html" })
}
}input,
select,
textarea {
width : 100%;
padding : 12px;
border : 1px solid #555;
margin-top : 6px;
margin-bottom : 16px;
resize : vertical;
}
textarea {
height : 170px;
}
button {
background-color : #0563bb;
color : white;
padding : 12px 20px;
border : none;
cursor : pointer;
}
button:before {
content : attr(type);
text-transform : capitalize;
}
button:hover {
opacity : 0.9;
}
.contactform {
position : relative;
border-radius : 50px;
background-color : #f2f2f2;
padding : 5px;
z-index : 2;
display : block;
margin-left : auto;
margin-right : auto;
margin-bottom : auto;
margin-top : 1%;
width : 100%;
animation-name : gradient;
animation-duration : 3s;
animation-iteration-count : infinite;
}
.contactform:hover {
animation-name : gradient;
animation-duration : 15s;
animation-iteration-count : infinite;
}
div.contactform > div:not(.row) {
text-align : center;
}
.column {
float : center;
width : 50%;
margin-top : 6px;
padding : 20px;
display : block;
margin-left : auto;
margin-right : auto;
}
.row:after {
content : "";
display : table;
clear : both;
}
@media screen and (max-width: 600px) {
.column,
button {
width : auto;
margin-top : 0;
}
}
.shakingErr {
border-color: red;
animation : shake 0.82s forwards;
}
@keyframes shake {
10%,90% { transform: translate3d(-1px, 0, 0); }
20%,80% { transform: translate3d( 2px, 0, 0); }
30%,50%,70% { transform: translate3d(-4px, 0, 0); }
40%,60% { transform: translate3d( 4px, 0, 0); }
}<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div>
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xdobkgny" method="POST" novalidate >
<label>First Name</label>
<input name="firstname" type="text" placeholder="Your First Name.." required>
<label>Last Name</label>
<input name="lastname" type="text" placeholder="Your Last Name.." required>
<label>Email:</label>
<input name="email" type="email" placeholder="Your Email.." required>
<label>Subject</label>
<textarea name="subject" placeholder="Lets Collaborate.." required></textarea>
<button type="submit"></button>
</form>
</div>
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397275.html
標籤：javascript html css