Sobre tener el form y el php que lo procesa en una sóla página, también es posible.
El error en lo que estás haciendo es otro (bueno, no un error necesariamente porque podría funcionarte), es más bien una falla conceptual.
En primer lugar hay que entender que cualquier validación en "serio" debe llevarse a cabo en el servidor por dos motivos fundamentales,
Javascript puede ser desactivado
Javascript se ejecuta del lado del cliente y se implementa a través del DOM y los navegadores actuales tienen herramientas que permiten manipularlo al antojo del usuario
Es cierto que el usuario normal ó promedio, no va a estar desactivando javascript ó manipulando el html. Y si uno valida por seguiridad, no hay que pensar en los miles de personas que navegan tu sitio en forma "normal", sin en ese único que quiera violarla.
Pero entonces, para que se valida con javascript, bueno, basicamente para mejorar la experiencia y velocidad de quien navega, porque podrías, si los datos ingresados no se ajustan a ciertas características, evitar que tener que ejecutar el php.
Teniendo en cuenta lo previo, el fallo en tu sistema, es que validás por javascript, pero necesitando ejecutar el php
Supongo que con un ejemplo se apreciará mejor, es un ejemplo muy básico, con una validación muy precaria, pero que te permite verificar que si no se pasa la validación por javascript, el php no se ejecuta.
Código PHP:
Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Form básico - demo</title>
<script type="text/javascript">
//<![CDATA[
function validar(){
var elNombre = document.getElementById('nombre2');
if(elNombre.value == ''){
document.getElementById('error_nombre').innerHTML = "Falta nombre";
return false;
}
}
//]]>
</script>
</head>
<body>
<?php
if(!isset($_POST['procesando'])){ // mostramos el form
?>
<h1>Formulario básico sin validación javascript</h1>
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">
<p>
<label for="nombre">Nombre</label>
<input type="text" value="" id="nombre" name="nombre" autocomplete="off" /><br /><br />
<input type="submit" value="procesar" name="procesando" />
</p>
</form>
<h1>Formulario básico + validación javascript</h1>
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post" onsubmit="return validar();">
<p>
<label for="nombre">Nombre</label>
<input type="text" value="" id="nombre2" name="nombre" autocomplete="off" /> <span id="error_nombre"><!-- mensaje de error --></span><br /><br />
<input type="submit" value="procesar" name="procesando" />
</p>
</form>
<?php
}else{
// mostramos el procesamiento
$usuario = $_POST['nombre'];
echo "<p>Se envió \$_POST['nombre']</p>\n";
}
if($usuario == null){
echo "<p>el usuario es NULL</p>\n";
// realizar acción
}
echo "<p>el usuario es empty</p>\n";
// realizar acción
}
if($usuario == ''){
echo "<p>el usuario es vacio</p>\n";
$usuario = "vacio";
// realizar acción
}
echo "El usuario es: <b>" . $usuario . " </b>\n";
echo "<p><a href='form-basico-javascript.php'>Enviar otra vez</a></p>";
}
?>
</body>
</html>
Como se vé, también estoy integrando el html del form y el php que lo recibe, en una misma página.
Hay una alternativa más, que es el uso de Ajax, pero en definitiva Ajax es javascript.
Así que por el momento sería bueno que te limites a analizar este caso
Este tema es tratado frecuentemente en FDW, pero nunca está de más repasar el concepto.
Saludos