const firstNameEl = document.querySelector('#firstName');
const lastNameEl = document.querySelector('#lastName');
const emailEl = document.querySelector('#email');
const telephoneEl = document.querySelector('#telephone');
const form = document.querySelector('#apply');
const checkFirstName = () => {
let valid = false;
const firstName = firstNameEl.value.trim();
if (!isRequired(firstName)) {
showError(firstNameEl, 'First name cannot be blank');
} else if (!isFirstNameValid(firstName)) {
showError(firstNameEl, 'First name must only contain letters');
} else {
showSuccess(firstNameEl);
valid = true;
};
return valid;
};
const checkLastName = () => {
let valid = false;
const lastName = lastNameEl.value.trim();
if (!isRequired(lastName)) {
showError(lastNameEl, 'Last name cannot be blank');
} else if (!isLastNameValid(lastName)) {
showError(lastNameEl, 'Last name must only contain letters');
} else {
showSuccess(lastNameEl);
valid = true;
}
return valid;
};
const checkEmail = () => {
let valid = false;
const email = emailEl.value.trim();
if (!isRequired(email)) {
showError(emailEl, 'Email cannot be blank.');
} else if (!isEmailValid(email)) {
showError(emailEl, 'Email is not valid.')
} else {
showSuccess(emailEl);
valid = true;
}
return valid;
};
const checkTelephone = () => {
let valid = false;
const telephone = telephoneEl.value.trim();
if (!isRequired(telephone)) {
showError(telephoneEl, 'Telephone field cannot be left blank');
} else if (!isTelephoneValid(telephone)) {
showError(telephoneEl, 'Number is not valid')
} else {
showSuccess(telephoneEl);
valid = true;
}
return valid;
};
// const accept = () => {
// if (!document.querySelector('#accept').checked) {
// showError(accept, 'You must accept the terms to continue')
// } else {
// showSuccess(accept);
// valid = true;
// }
// return valid;
// };
const isFirstNameValid = (firstName) => {
const re = /^[a-zA-Z] $/;
return re.test(firstName);
};
const isLastNameValid = (lastName) => {
const re = /^[a-zA-Z] $/;
return re.test(lastName);
};
const isEmailValid = (email) => {
const re = /^(([^<>()\[\]\\.,;:\s@"] (\.[^<>()\[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/;
return re.test(email);
};
const isTelephoneValid = (telephone) => {
const re = /^[0-9] $/;
return re.test(telephone);
};
const isRequired = value => value === '' ? false : true;
const showError = (input, message) => {
const formField = input.parentElement;
formField.classList.remove('success');
formField.classList.add('error');
const error = formField.querySelector('small');
error.textContent = message;
};
const showSuccess = (input) => {
const formField = input.parentElement;
formField.classList.remove('error');
formField.classList.add('success');
const error = formField.querySelector('small');
error.textContent = '';
}
form.addEventListener('submit', function(e) {
e.preventDefault();
//validate fields
let isFirstNameValid = checkFirstName(),
isLastNameValid = checkLastName(),
isEmailValid = checkEmail(),
isTelephoneValid = checkTelephone();
let
isFormValid = isFirstNameValid &&
isLastNameValid &&
isEmailValid &&
isTelephoneValid;
if (isFormValid) {
}
});
const debounce = (fn, delay = 500) => {
let timeoutId;
return (...args) => {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
fn.apply(null, args)
}, delay);
};
};
form.addEventListener('input', debounce(function(e) {
switch (e.target.id) {
case 'firstName':
checkFirstName();
break;
case 'lastName':
checkLastName();
break;
case 'email':
checkEmail();
break;
case 'telephone':
checkTelephone();
break;
}
}));<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DAS Applicant Form</title>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<style>
</style>
</head>
<body style="padding:40px">
<main>
<h1>Applicant Form</h1>
<div class="container">
<form action="create-lead.php" id="apply" class="form" method="POST">
<div class="form-field">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" id="firstName">
<small></small>
</div>
<div class="form-field ">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" id="lastName">
<small></small>
</div>
<div class="form-field">
<label for="email">Email</label>
<input type="text" name="email" id="email">
<small></small>
</div>
<div class="form-field">
<label for="telephone">Telephone</label>
<input type="text" name="telephone" id="telephone">
<small></small>
</div>
<label for="buyerType">Application Type</label>
<select class="secondary" name="buyerType" id="buyerType">
<option value="Purchase">Purchase</option>
<option value="FirstTimeBuyer">First Time Buyer</option>
<option value="Remortgage">Remortgage</option>
<option value="RaiseFunds">Raise Funds</option>
</select>
<div class="form-field">
<label for="accept">
<input type="checkbox" id="accept" name="accept" value="yes">
I agree to the terms and conditions <a href="#">See terms</a>
</label>
<small></small>
</div>
<div class="form-field">
<input class="outline " type="submit" name="appy" id="apply">
<input class="outline secondary" type="reset" name="reset" id="reset">
</div>
</form>
</div>
<script src="js/app.js"></script>
</main>
</body>
</html>我有一個帶有提交按鈕的表單，在我實作 javascript 驗證之前它正在作業，現在提交按鈕沒有提交。
我查看了其他答案，但沒有任何問題與我的問題相符。create-lead.php 檔案作業正常，因為它已經過多次測驗，但是 javascript 代碼中有一些東西阻止了提交按鈕的作業，但我沒有足夠的使用 javascript 的經驗來解決它。
uj5u.com熱心網友回復：
原因是e.preventDefault();，它告訴瀏覽器不執行提交功能。
您可以將 移動e.preventDefault();到一個條件，例如
if (!isFormValid) { e.preventDefault(); }，因此只有在驗證失敗時才會“阻止”它。
檢查 MDN： https ://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495686.html
標籤：javascript html 形式 提交
上一篇：有人可以解釋一下這個遞回嗎？