Validación de campos de un formulario antes de su envío

publicado por: Anonymous

He hecho un fomulario simple en el que hay que meter un mail que cumpla un patron, una pregunta que su longitud sea mayor de 10 caracteres y la complejidad de la pregunta (un número entre 1 y 5). También hay que poner dos respuestas erroneas a la pregunta y una respuesta correcta.
El problema es que quiero que no se pueda dar a mandar (o que al darle no haga nada) si uno de estos requerimientos no se cumple. Al dar a mandar si está todo bien escrito iría a una página php simple con el código:

<?php phpinfo();?>

Esta más tarde se sustituirá por un código para subirlo a una base de datos.

El problema es que no sé que hay que poner para que mire primero los patters antes de cambiar a la página del php.

Este sería el código (JS arriba, HTML abajo):

_x000D_

_x000D_

    <meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">_x000D_
	<title>Quizzes</title>_x000D_
    <link rel='stylesheet' type='text/css' href='stylesPWS/style.css' />_x000D_
	<link rel='stylesheet' _x000D_
		   type='text/css' _x000D_
		   media='only screen and (min-width: 530px) and (min-device-width: 481px)'_x000D_
		   href='stylesPWS/wide.css' />_x000D_
	<link rel='stylesheet' _x000D_
		   type='text/css' _x000D_
		   media='only screen and (max-width: 480px)'_x000D_
		   href='stylesPWS/smartphone.css' />_x000D_
		    <script src="js/jquery.min.js"></script>_x000D_
  <script>_x000D_
	$(document).ready(function(){_x000D_
		$("#botoia").click(function(){_x000D_
			var posta = $("#posta").val();_x000D_
			var galdera = $("#galdera").val();_x000D_
			var erantzunZuzena = $("#erantzunZuzena").val();_x000D_
			var erantzunOkerra1 = $("#erantzunOkerra1").val();_x000D_
			var erantzunOkerra2 = $("#erantzunOkerra2").val();_x000D_
			var erantzunOkerra3 = $("#erantzunOkerra2").val();_x000D_
			var zailtasuna = $("#zailtasuna").val();_x000D_
			var arloa = $("#arloa").val();_x000D_
			_x000D_
			var zuzena = true;_x000D_
			var postaPatroia = new RegExp("[a-z]{2,}[0-9]{3}@ikasle.ehu.(eus||es)");_x000D_
			_x000D_
			if(posta.length == ("0") || galdera.length == ("0") || erantzunZuzena.length == ("0") || erantzunOkerra1.length == ("0") || erantzunOkerra2.length == ("0") || erantzunOkerra3.length == ("0") || zailatasuna.length == ("0") || arloa.length == ("0")){_x000D_
				alert("Derrigorrezko eremuren bat betetzea falta zaizu");_x000D_
				zuzena=false;_x000D_
			} else {_x000D_
				if(!postaER.test(posta)){_x000D_
					alert("Ez duzu sartu baliozko posta");_x000D_
					zuzena=false;_x000D_
				}_x000D_
				if((/[1-5]/).test(zailtasuna)){_x000D_
				}else {_x000D_
					alert("Zailtasunaren balioa 1 eta 5en artean egon behar da hauek barne");_x000D_
					zuzena=false;_x000D_
				}_x000D_
				if(galdera.length<("10")){_x000D_
						alert("Galderak 10 karaktere edo gehiago eduki behar ditu");_x000D_
						zuzena=false;_x000D_
				}_x000D_
			}_x000D_
			_x000D_
			if(!postaPatroia.test(posta) || (/[1-5]/).test(zailtasuna) || (galdera.length<"10"){_x000D_
					alert("Daturen bat txarto sartu da");_x000D_
					return false;_x000D_
			}_x000D_
		});_x000D_
		_x000D_
		$("#reset").click(function(){_x000D_
			$("#posta").val(""); $("#galdera").val(""); $("#erantzunZuzena").val(""); $("#erantzunOkerra1").val(""); _x000D_
			$("#erantzunOkerra2").val(""); $("#erantzunOkerra3").val(""); $("#zailtasuna").val(""); $("#arloa").val("");_x000D_
		});_x000D_
	});_x000D_
	_x000D_
  </script>

_x000D_

_x000D_

_x000D_

<section class="main" id="s1">
<div>
    <form id="formularioa" name="form" action="../lab0.php" method="POST">
        <strong> Posta (*):  <strong> <input type="text" id="posta" required/><br>
        <strong> Galdera (*):  </strong> <input type="text" id="galdera" required/><br>
        </strong>Erantzun zuzena (*): </strong> <input type="text" id="erantzunZuzena" required/><br>
        <strong> Erantzun okerra 1 (*): </strong> <input type="text" id="erantzunOkerra1" required/><br>
        <strong> Erantzun okerra 2 (*): <strong> <input type="text" id="erantzunOkerra2" required/><br>
        <strong>Erantzun okerra 3 (*):</strong> <input type="text" id="erantzunOkerra3" required/><br>
        <strong>Zailtasuna(1 - 5) (*): </strong> <input type="text" id="zailtasuna" required/><br>
        <strong>Arloa: </strong> <input type="text" id="arloa"/></br>

        <input type="submit" id="botoia" value="Bidali"/>
        <input type="reset" value="Reset"><br>

        <div id="aster" ><strong> * | Nahitaezko hutsuneak </strong></div><br><br>
    </form>
</div>
</section>
<footer class='main' id='f1'>
    <p><a href="http://en.wikipedia.org/wiki/Quiz" target="_blank">What is a Quiz?</a></p>
    <a href='https://github.com'>Link GITHUB</a>
</footer>

solución

La idea es retornar false en la validación para impedir que el formulario sea enviado. El problema es que eso debes hacerlo en el evento onsubmit del form.

<form id="formularioa" name="form" action="../lab0.php"
         method="POST" onsubmit="return validarForm();">
</form>

Ahí si, va a bloquear el envío si se retorna false.

function validarForm(){
    if(emailEsCorrecto())
      return true;
    else
      return false;
}

Otra opción es llamar e.preventDefault() pero para eso tienes que declarar el evento.

Además si hay errores al ejecutar la función entonces no llegará a retornar false y puede que envíe el formulario, por lo que te recomiendo que también valides del lado del servidor, así previenes insertar basura en la base de datos si el browser tiene JavaScript desactivado o hay algún ataque malintencionado.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *