Menu
I've asked this before, but didn't really use real code so this time I will. I need to be able to validate, at least, one of the input boxes. If it's empty it says it's empty and it won't open the mail.php. If it's not empty it will open the mail.php and it should submit it's content so that in the php page it can be processed.
Here's what I got:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="inscripcion-style.css">
<title>Inscripción</title>
<link rel="icon" href="LOGO.ico" type="image/x-icon">
<script>
function validation() {
var x = document.getElementById("equipo").value;
if (document.getElementById("equipo").value == "" || document.getElementById("equipo").value == " ") {
alert("vacio");
return false;
} else {
alert("no vacio");
return true;
}
}
</script>
</head>
<body>
<div class="header">
<h1>
<font color = "#015BA5">
Inscripción de Equipo
</font>
</h1>
</div>
<form name="myForm" id="myForm" action="mail.php" method="POST" onsubmit="validation()">
<div>
<div class="aBox" id="num1">
<div class="label" style="font-size: 15pt;">Nombre del Equipo</div>
<div class="formParent">
<input type="text" style=" width: 200px; font-size: 15pt;" name="equipo" id="equipo">
</div>
</div>
<div class="aBox" id="num1">
<div class="label" style="font-size: 15pt;">Numero de Integrantes</div>
<div class="formParent">
<select style=" width: 200px; font-size: 15pt;" name="integrantes">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1 0>10</option>
</select>
</div>
</div>
<div id="num1">
<div class="label" style="font-size: 15pt;">Universidad</div>
<div class="formParent">
<select style=" width: 200px; font-size: 15pt;" name="Uni">
<option value=U met>UMET</option>
<option value=I nter-Metro>Inter-Metro</option>
</select>
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Contacto 1
</font>
</h1>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel">
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Contacto 2
</font>
</h1>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel2">
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Profesor
</font>
</h1>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel3">
</div>
</div>
</div>
<div>
<input type="submit" value="Enviar" class="enviarBtn">
</div>
</form>
</body>
It's for a spanish client. My problem is that it does the validation, but it still does open the php page and submits it's content even if it returns false. Not adding css or what's in the php page cause it doesn't really mater. I just need help with this issue.
In my document it's a lot more organized, wish I could've done the same here.
Thanks.
694
asked Jul 09 '26 13:07
Try this:
<form name="myForm" id="myForm" action="mail.php" method="POST" onsubmit="return validation();">
Note that I have put return in onsubmit.
175
answered Jul 12 '26 06:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With