Mi código consiste en un formulario para registrar un usuario y JavaScript se debe encargar de comprobar que la información de los campos sea correcta.
Aquí estaría mi código de html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<script type="text/javascript" src="miJavaScript.js"></script>
<title>Registrarse</title>
</head>
<div class="container">
<div class="cabecera">
<header>
<div class = "titulo">
<h1>Organizacion DVD XIII</h1>
</div>
<div class="buscador">
<input type="text" id="letras" placeholder="Buscar cualquier pelicula" maxlenght="500">
<input type="submit" id="boton" name="buscar" value = "Buscar">
<select name="categorias" id="buscador_cat" >
<option value="Prueba1">Todas las categorias</option>
<option value="Prueba2">Prueba 2</option>
<option value="Prueba3">Prueba 3</option>
</select>
</div>
<div class="links">
<a href="index.html">Indice</a>
<a href="login.html">Log In</a>
</div>
</header>
</div>
<div class="navegacion">
<nav>
<ul>
<li><a href="catalogo.html">Catalogo</a></li>
<li><a href="#">Carrito</a></li>
<li><a href="historial.html">Historial</a></li>
</ul>
</nav>
</div>
<div class="loguearse">
<article>
<form id="sigin" action = "signin.php" method="post" onsubmit="return validar();">
<h2>Registrarse</h2>
<label><b>Nombre de usuario</b></label>
<input type="text" id ="nombre" placeholder="Introduzca usuario" name="name" required >
<div id="nombreErr"></div>
<label><b>Contrasenia</b></label>
<input type="password" id ="pass" placeholder="Introduzca contrasenia" name="psw" required >
<div id="passErr"></div>
<label><b>Confirma contrasenia</b></label>
<input type="password" id ="pass2" placeholder="Introduzca contrasenia" name="psw2" required >
<div id="pass2Err"></div>
<label><b>Email</b></label>
<input type="text" id ="email" placeholder="Introduzca email" name="email" required >
<div id="emailErr"></div>
<label><b>Tarjeta de credito</b></label>
<input type="text" id ="cash" placeholder="Introduzca tarjeta" name="creditcard" required ><br>
<div id="cashErr"></div>
<input type="submit" name="registrarse" value="Registrarse">
</form>
</article>
</div>
<div class="pie">
<footer>
Copyright © Organizacion DVD XIII
</footer>
</div>
</div>
</html>
El código se encuentra en un fichero php porque luego me gustaría guardar la información que se registra, no se si el problema puede ser ese.
Aquí el código de JavaScript:
function validar(){
var nombre, nombreErr, pass, passErr, pass2, pass2Err, email, emailErr, cash, cashErr, mensajeErr;
nombre = document.getElementById("nombre").value; //Cogemos el valor de nombre
nombreErr = document.getElementById("nombreErr").value; //Cogemos la referencia al error del nombre
pass = document.getElementById("pass").value; //Cogemos el valor de password
passErr = document.getElementById("passErr").value; //Cogemos la referencia al error de password
pass2 = document.getElementById("pass2").value; //Cogemos el valor de password2
pass2Err = document.getElementById("pass2Err").value; //Cogemos la referencia al error de password2
email = document.getElementById("email").value; //Cogemos el valor de email
emailErr = document.getElementById("emailErr").value; //Cogemos la referencia al error de email
cash = document.getElementById("cash").value; //Cogemos el valor de cash
cashErr = document.getElementById("cashErr").value; //Cogemos la refernecia al error de cash
mensajeErr = ""; //Variable con el mensaje de error
if(nombre.match(/^[a-zA-Z]+$/)){
nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Uso de carateres prohibidos.";
nombreErr.innerHTML = mensajeErr;
return false;
} else if (nombre == ""){
nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Nombre de usuario vacio.";
nombreErr.innerHTML = mensajeErr;
return false;
} else if(pass.lenght < 8 || pass.lenght > 25){
passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* La contrasenya debe encontrarse entre 8 y 25 carateres";
passErr.innerHTML = mensajeErr;
return false;
} else if(!pass.match(/^[0-9a-zA-Z]+$/)){
passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Uso de caracteres prohibidos.";
passErr.innerHTML = mensajeErr;
return false;
} else if(pass != pass2){
pass2Err.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* La contrasenya no coinciden.";
alert("Las contrasenyas no coinciden");
pass2Err.innerHTML = mensajeErr;
return false;
} else if(email.length == 0){
emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Campo vacio.";
emailErr.innerHTML = mensajeErr;
return false;
} else if(!email.match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Formato no valido.";
emailErr.innerHTML = mensajeErr;
return false;
} else if(cash.lenght == 0){
passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Campo vacio.";
cashErr.innerHTML = mensajeErr;
return false;
} else if(!cash.match(/^[0-9]+$/)){
cashErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
mensajeErr = "* Formato no valido.";
cashErr.innerHTML = mensajeErr;
return false;
} else {
return true;
}
}