-1
我對錶單驗證JavaScript有點麻煩。我有兩個工作表單驗證，但實際上不再需要其中一個。所以我試圖將它們組合成一個函數。問題是，如果我嘗試我不再讓輸入背景顏色工作。任何人都可以告訴我我做錯了什麼嗎？Javascript表單驗證
//onload callback function
function main() {
console.log("in main function");
var myForm = document.getElementById("payment");
myForm.addEventListener("submit",validateForm);
}
//validate callback function
function validateForm(event) {
var formValid = true;
var myForm = document.getElementById("payment");
console.log("in validateForm function")
if (myForm.first_name.value == "") {
formValid = false;
//display error message
document.getElementById("firstname").className += " formInvalid"; //add the class .formInvalid
//stop form from submitting
event.preventDefault();
}
else
document.getElementById("firstname").className += " formvalid"; //add the class .formInvalid
if (myForm.last_name.value == "") {
formValid = false;
//display error message
document.getElementById("lastname").className += " formInvalid"; //add the class .formInvalid
//stop form from submitting
event.preventDefault();
}
else
document.getElementById("lastname").className += " formvalid"; //add the class .formInvalid
if (myForm.email.value == "") {
formValid = false;
//display error message
document.getElementById("email").className += " formInvalid"; //add the class .formInvalid
//stop form from submitting
event.preventDefault();
}
else
document.getElementById("email").className += " formvalid"; //add the class .formInvalid
if (myForm.message.value == "") {
formValid = false;
//display error message
document.getElementById("message").className += " formInvalid"; //add the class .formInvalid
//stop form from submitting
event.preventDefault();
}
else
document.getElementById("message").className += " formvalid"; //add the class .formInvalid
}
//onload callback function
function main2() {
console.log("in main2 function");
var myForm2 = document.getElementById("payment");
myForm2.addEventListener("submit",validateinput);
}
// form validation, makes sure that the user inputs the correct data types.
function validateinput(b){
var myForm2 = document.getElementById("payment");
console.log("in validateinput function")
var email = document.getElementById('email').value;
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var message = document.getElementById('message').value;
var emailFilter = /^([a-zA-Z0-9_.-])[email protected](([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var firstnameFilter = /^([" "a-zA-Z])+$/;
var lastnameFilter = /^([" "a-zA-Z])+$/;
var messageFilter = /^([" "a-zA-Z0-9_.-])+$/;
var formValid = true;
if (!emailFilter.test(email)) {
formValid = false;
//display error message
alert('Please enter a valid e-mail address.');
//stop form from submitting
b.preventDefault();
return false;
}
if (!firstnameFilter.test(firstname)) {
formValid = false;
alert('Please correct your first name.');
//stop form from submitting
b.preventDefault();
return false;
}
if (!lastnameFilter.test(lastname)) {
formValid = false;
//display error message
alert('Please correct your last name.');
//stop form from submitting
b.preventDefault();
return false;
}
if (!messageFilter.test(message)) {
formValid = false;
//display error message
alert('Please correct your message.');
//stop form from submitting
b.preventDefault();
return false;
}
alert('Your message has beeen submitted')
return true;
}
以同樣的方式加載時和在HTML主體標籤的onload爲main();main2();和來自同一個腳本，你可以看到頂部功能validateForm(event)只是改變了calssname所以我的CSS可以改變vaild或invaild的背景。這工作正常，但只適用於空輸入「」。我不知道如何改變它/^([" "a-zA-Z])+$/;我有另一個功能，它會查找確切的輸入，然後顯示我想保留的警報消息。
我試圖將它們合併成一個函數，但我必須先輸入一個電子郵件，然後輸入姓名，然後按的順序輸入或者不會發生背景顏色/類名稱更改。我假設代碼是從上到下讀取的。 document.getElementById("lastname").className += " formInvalid";也不起作用。請任何人都可以幫我解決這個問題。
//onload callback function
function main2() {
console.log("in main2 function");
var myForm2 = document.getElementById("payment");
myForm2.addEventListener("submit",validateinput);
}
// form validation, makes sure that the user inputs the correct data types.
function validateinput(b){
var myForm2 = document.getElementById("payment");
console.log("in validateinput function")
var email = document.getElementById('email').value;
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var message = document.getElementById('message').value;
var emailFilter = /^([a-zA-Z0-9_.-])[email protected](([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/g;
var firstnameFilter = /^([" "a-zA-Z])+$/g;
var lastnameFilter = /^([" "a-zA-Z])+$/g;
var messageFilter = /^([a-zA-Z0-9_.-])+$/g;
var formValid = true;
if (!emailFilter.test(email)) {
formValid = false;
//display error message
document.getElementById("email").className += " formInvalid"; //add the class .formInvalid
alert('Please enter a valid e-mail address.');
//stop form from submitting
b.preventDefault();
return false;
}
else
document.getElementById("email").className += " formvalid"; //add the class .formInvalid
if (!firstnameFilter.test(firstname)) {
formValid = false;
//display erroe message
document.getElementById("firstname").className += " formInvalid"; //add the class .formInvalid
alert('Please correct your first name.');
//stop form from submitting
b.preventDefault();
return false;
}
else
document.getElementById("firstname").className += " formvalid"; //add the class .formInvalid
if (!lastnameFilter.test(lastname)) {
formValid = false;
//display error message
document.getElementById("lastname").className += " formInvalid"; //add the class .formInvalid
alert('Please correct your last name.');
//stop form from submitting
b.preventDefault();
return false;
}
else
document.getElementById("lastname").className += " formvalid"; //add the class .formInvalid
if (!messageFilter.test(message)) {
formValid = false;
//display error message
document.getElementById("message").className += " formInvalid"; //add the class .formInvalid
alert('Please correct your message.');
//stop form from submitting
b.preventDefault();
return false;
}
else
document.getElementById("message").className += " formvalid"; //add the class .formInvalid
alert('Your message has beeen submitted')
return true;
}