Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: bermartinv en 10 de Febrero 2016, 14:34
-
Adjunto mi código para este ejercicio del curso JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form{
border:solid thin yellow;
background-color:coral;
width: 500px;
height:220px;
}
input {
display:block;
margin-left:30px;
}
.enviar{
border:solid thin aqua;
display:inline;
margin: 10px 10px 5px 50px;
position: relative;
top:50px;
}
</style>
<script>
function validar(){
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
validarNombre(nombre);
email = minusculasEmail(email);
email = atEmail(email);
validarEmail(email);
}
function validarNombre(nombre){
if ((nombre.length)<3){
alert("El nombre no cumple tener al menos tres letras");
}
}
function validarEmail(email){
var contadorArroba=false;
var contadorPunto=false;
for (var i=0;i<(email.length);i++){
if (email[i]=='@'){
contadorArroba=true;
}
if (email[i]=='.'){
contadorPunto=true;
}
}
if (contadorArroba==false || contadorPunto==false){
alert ("Su correo electronico deberia tener un \'@\' y un \'.' ");
}
}
function minusculasEmail(correo){
return correo.toLowerCase();
}
function atEmail(correo){
return correo.replace(/at/g,'@');
}
</script>
</head>
<body>
<form method="get" onsubmit="validar()" name="formulario">
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Introduzca su nombre" size="30"/>
<label>Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Introduzca sus apellidos" size="60"/>
<label>Correo electrónico</label>
<input type="text" name="email" id="email" placeholder="Introduzca email" size="60"/>
<input class="enviar" type="submit" value="Enviar" />
<input class="enviar" type="reset" value="Reset"/>
</form>
<div id="solucion"></div>
</body>
</html>
-
Hola bermartinv.
Si relleno el correo electrónico con mayúsculas cuando envío el formulario, lo manda en mayúsculas. Esto es lo que aparece en la barra de direcciones:
...nombre=pepe&apellidos=papa&email=PACO%40GMAIL.COM
Con el 'at' pasa lo mismo.
..nombre=parapapa&apellidos=Par&email=pepe+at+p.com
La comprobaciones se hacen correctamente, pero a la hora de enviar el formulario lo envía mal.
Saludos.
-
adjunto el nuevo código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form{
border:solid thin yellow;
background-color:coral;
width: 500px;
height:220px;
}
input {
display:block;
margin-left:30px;
}
.enviar{
border:solid thin aqua;
display:inline;
margin: 10px 10px 5px 50px;
position: relative;
top:50px;
}
</style>
<script>
function validar(){
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
validarNombre(nombre);
email = minusculasEmail(email);
email = atEmail(email);
validarEmail(email);
document.getElementById("email").value = email;
}
function validarNombre(nombre){
if ((nombre.length)<3){
alert("El nombre no cumple tener al menos tres letras");
}
}
function validarEmail(email){
var contadorArroba=false;
var contadorPunto=false;
for (var i=0;i<(email.length);i++){
if (email[i]=='@'){
contadorArroba=true;
}
if (email[i]=='.'){
contadorPunto=true;
}
}
if (contadorArroba==false || contadorPunto==false){
alert ("Su correo electronico deberia tener un \'@\' y un \'.' ");
}
}
function minusculasEmail(correo){
return correo.toLowerCase();
}
function atEmail(correo){
return correo.replace(/at/g,'@');
}
</script>
</head>
<body>
<form method="get" onsubmit="validar()" name="formulario">
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Introduzca su nombre" size="30"/>
<label>Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Introduzca sus apellidos" size="60"/>
<label>Correo electrónico</label>
<input type="text" name="email" id="email" placeholder="Introduzca email" size="60"/>
<input class="enviar" type="submit" value="Enviar" />
<input class="enviar" type="reset" value="Reset"/>
</form>
<div id="solucion"></div>
</body>
No he tenido que hacer mucho pero hasta que me he dado cuenta me ha costado un poco. El hecho estaba en que modificaba el correo por las condiciones que ponía pero una vez modificado no lo volvía a poner en el formulario. Lo que me faltaba era:
document.getElementById("email").value = email;
-
Ahora todo perfecto.
Saludos.