-1
У меня проблемы с моей проверкой формы JavaScript. У меня есть две проверки работоспособности, но она практически не нужна. Поэтому я пытаюсь объединить их в одну функцию. Проблема в том, что если я попытаюсь, я больше не получаю цвет фона ввода. Может ли кто-нибудь показать мне, что я делаю неправильно?Javascript form validating
//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;
}
Обе нагрузки таким же образом и имеют OnLoad в теге HTML тела для 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;
}