0

Necesito que un formulario que cree valide si unos ciertos campos están completados, pero no sé si se debe usar un botón para enviar los formularios o un input-submit. Además de esto cuando le doy al botón se ejecuta el código PHP que envía los datos a la base de datos sin validar lo que escribí en JAVASCRIPT.

function validar(){
	let nombre= document.getELementsByClassName('input')[0,1,2,3].value;
	if (nombre==0) {
		alert("hay campos vacios");
	}else{
		alert("1");
	}

}
<?php
include "conectar.php";
$nombre=$_POST["nombre"];
$apellido=$_POST["apellido"];
$email=$_POST["email"];
$contraseña=$_POST["contraseña"];

$evaluacion="INSERT INTO multas(nombre, apellido, email, clave) VALUES('$nombre', '$apellido', '$email', '$contraseña')";
$resultado=mysqli_query($conexion, $evaluacion);

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
	<body>		
		<div class="contenedor">
			<div class="contenedor_botones_inicio">
			<button class="boton_inicio" id="boton_inicio1" onclick="saludo()">registrate</button><button class="boton_inicio" id="boton_inicio2">Ingresa</button>
</div>
		<form action="procesar.php" method="post">
				<h3>Registrate gratis</h3>
				<input type="text" placeholder="Primer nombre*" class="texto" id="texto1" name="nombre">
				<input type="text" placeholder="Segundo nombre*" class="texto" id="texto2" name="apellido"><br>
				<input type="email" placeholder="Email*" class="texto" id="texto3" name="email"><br>
				<input type="password" placeholder="Contraseña*" class="texto" id="texto4" name="contraseña"><br>
				<button class="boton_enviar" onclick="validar()"></button>
		</form>
</div>
        <script src="comando.js"></script>
    </body>
</html>

4
  • No te entiendo. Commented el 30 oct. 2019 a las 3:12
  • Lo normal sería utilizar AJAX junto a JQuery. Pero también se puede utilizar solo javascript sin AJAX. Lo primero necesitas desactivar el submit con event.preventDefault() y luego volver a enviar el evento de submit
    – Jose
    Commented el 30 oct. 2019 a las 3:20
  • Una pregunta, listo utilizo esas herramientas y después cuando convierta el código en una APP mediante phonegap estos procesos de validación se van a seguir realizando? Commented el 30 oct. 2019 a las 3:29
  • 1
    Si, sigue siendo html, css y javascript. JQuery es como una especie de atajo de javascript. Por ejemplo algo que te puede costar 5-6 lineas te lo resume en una linea. Aunque como en la web, tienes que importar el script con una etiqueta <script> externa
    – Jose
    Commented el 30 oct. 2019 a las 3:44

1 respuesta 1

0

pude solucionar esta pregunta de este modo:le puse el atributo onsubmit="return validar()" a el form luego de esto le agregue algunas cositas al código JAVASCRIPT, ahora quiero saber si es un buena práctica y quiero saber si es mejor hacer este proceso o validar mediante AJAX y JQuery.

function validar(){
	let nombre, apellido, email, contraseña;
	nombre=document.getElementById("texto1").value;
	apellido=document.getElementById("texto2").value;
	email=document.getElementById("texto3").value;
	contraseña=document.getElementById("texto4").value;
	if (nombre==="") {
		alert("hay campos vacios");
		return false;
	}else{
		alert("1");
	}

}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
	<body>		
		        <script src="comando.js"></script>
		<div class="contenedor">
			<div class="contenedor_botones_inicio">
			<button class="boton_inicio" id="boton_inicio1" onclick="saludo()">registrate</button><button class="boton_inicio" id="boton_inicio2">Ingresa</button>
</div>
		<form action="procesar.php" method="post" onsubmit="return validar()">
				<h3>Registrate gratis</h3>
				<input type="text" placeholder="Primer nombre*" class="texto" id="texto1" name="nombre">
				<input type="text" placeholder="Segundo nombre*" class="texto" id="texto2" name="apellido"><br>
				<input type="email" placeholder="Email*" class="texto" id="texto3" name="email"><br>
				<input type="password" placeholder="Contraseña*" class="texto" id="texto4" name="contraseña"><br>
				<input type="submit" name="" class="boton_enviar">
		</form>
</div>
    </body>
</html>

1
  • 1
    El JQuery se utiliza para el AJAX. El Ajax se utiliza para enviar los datos. Vamos, en vez de un action="procesar.php" es un $.ajax(..... Es una manera distinta de hacerlo ya que le puedes pasar datos "ocultos" sin añadir un <input type="hidden"> o si quieres hacer que la página no se tenga que recargar y solo te salte un mensaje.
    – Jose
    Commented el 30 oct. 2019 a las 5:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.