Jeśli robisz walidację w HTML, to nie musisz robić drugi raz tego samego w JS. Jeśli jednak chcesz to zrobić, możesz wspomóc się metodą event.preventDefault(), która zatrzymuje domyślne zachowanie formularza w trakcie wysyłania. Poza tym radziłbym użyć obserwatora zdarzeń jak form1.addEventListener('submit', validateForm1); zamiast atrybutu w HTML onsubmit="return validateForm()". No i użyłeś dla obu formularzy dwóch funkcji o takich samych nazwach, więc obojętnie który wyślesz, to wykonają się obie funkcje. Moja propozycja kodu (w razie uwag lub pytań pisać śmiało
):
<form id="myForm" name="myForm" method="post" action="MAILTO:x21133824@xxxx.xx">
<input type="text" name="username" placeholder="Username" id="username" >
<input type="password" name="password" placeholder="Password" size="" maxlength="11" id="password">
<input type="number" name="quantity" placeholder="Quantity" min="1" max="100" id="quantity">
<input type="text" name="Promo Code" placeholder="Promo Code" value="" id="promo">
<input type="submit" />
</form>
<br /><br />
<form id="nextForm" name="nextForm" method="post" action="MAILTO:x21133824@xxxx.xx">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="submit" />
</form>
var form1 = document.getElementById("myForm");
var form2 = document.getElementById("nextForm");
form1.addEventListener('submit', validateForm1);
form2.addEventListener('submit', validateForm2);
//order form
function validateForm1(event) {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var quantity = document.getElementById("quantity").value;
var promo = document.getElementById("promo").value;
if (username === null || username === "") {
alert("Please enter your Username.");
event.preventDefault();
return;
} else if (password === null || password === "") {
alert("Please enter your Password.");
event.preventDefault();
return;
} else if (password.length < 11) {
alert("Password must be 11 characters long.");
event.preventDefault();
return;
} else if (isNaN(quantity)) {
alert("Quantity must be in numbers.");
event.preventDefault();
return;
} else if (promo === null || promo === "") {
alert("Remember about your discount :)");
event.preventDefault();
return;
}
alert("THANK YOU FOR YOUR ORDER!");
}
//contact form
function validateForm2(event) {
var name = document.forms.nextForm.name;
var email = document.forms.nextForm.email;
var nameVal = name.value;
var emailVal = email.value;
if (nameVal === null || nameVal === "") {
alert("Please enter your name.");
name.focus();
event.preventDefault();
return;
} else if (emailVal === null || emailVal === "") {
alert("Please enter a valid e-mail address.");
email.focus();
event.preventDefault();
return;
}
alert("FORM OK");
}