Salto de línea en un TextBox de Formulario de Contacto Utilizando únicamente html y un archivo .js por favor (que php nada más no logro entenderlo T-T) y soy principiante en esto, así que espero me disculpen si pregunto demasiado
Es así:
Tengo un formulario de contacto en mi página web que va validando los campos conforme uno escribe (a fuerza tienen que poner su nombre, su correo, un asunto y un mensaje, el teléfono es opcional) y al finalizar de llenar los datos, los envía todo a mi correo personal ¿ok?
El asunto aquí es que en el cuadro de texto, si escriben sus comentarios con espacios de línea, párrafos (o como quien dice, que "presionan Enter") lanza la alerta de que no hay ningún mensaje escrito.
Las soluciones que he encontrado hacen que el mensaje se envíe aún si no hay nada escrito en el textbox, lo cual obviamente no deseo.
Si se escribe todo seguido sin espacios funciona bien, pero me gustaría que el usuario tuviera esa opción.
Les dejo mis códigos html y js por si les ayudan, gracias por sus respuestas ^^
El código HTML
Código:
Y aquí el archivo .js<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aurora. Diseño, animación e imagen. | Contacto</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="contacto.js"></script>
</head>
<body>
<div id="content">
<div id="main">
<div id="back_all">
<div id="header">
<div id="logo">
<h1><a href="http://www.aurora.elementfx.com">Aurora Carranza</a></h1>
<h2>Diseño, animación e imagen.</h2>
</div>
<div id="padding"><div id="menu">
<ul>
<li><a href="index.html" title="Inicio">Inicio</a></li>
<li><a href="aboutus.html" title="Información sobre mí">Acerca de...</a></li>
<li><a href="portafolio.html" title="Portafolio">Portafolio</a></li>
<li><a href="servicios.html" title="Servicios">Servicios</a></li>
<li class="hover"><a href="contacto.html" title="Contacto">Contacto</a></li>
</ul>
</div></div>
</div>
<div id="right">
<h2>Contacto.</h2><br />
<p>Dudas, comentarios, petición de presupuestos, quejas, o cualquier otro mensaje, puede ser enviado mediante el siguiente formulario.</p>
<form method="post" action="http://forms.melodysoft.com/" onsubmit="return validar()">
<p><input type="hidden" name="id" value="contactaurora"/></p>
<table border = "0">
<tr>
<td> Nombre: </td>
<td><input type="text" size="37" id="Nombre" name="Nombre"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" size="37" id="Email" name = "Email"/> </td>
<tr> <td></td> <td>A esta dirección contestaré tu mensaje.</td></tr>
</tr>
<tr>
<td>Fecha:</td>
<td><input type="text" size="20" id="Fecha" name = "Fecha"/> </td>
</tr>
<tr>
<td>Teléfono:</td>
<td><input type="text" size="20" id="Telefono" name = "Telefono"/> (opcional)</td>
</tr>
<tr>
<td>Asunto:</td>
<td><input type="text" size="37" id="Asunto" name="Asunto"/> </td>
</tr>
<tr>
<td valign="top">Mensaje:</td>
<td><textarea rows="5" cols="30" id="Mensaje" name="Mensaje" class="textarea"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Enviar" class="submit" /></td>
</tr>
</table>
</form><br/>
<h2>Correo electrónico:</h2><br/>
<p>Contacto vía E-mail: <a href="mailto:[email protected]">Enviar correo</a></p>
</div>
<div id="left">
<h3>Contacto</h3>
<p>Si tienes alguna duda,<br/>queja, comentario, sugerencia o si te interesa alguno de los servicios que ofresco aquí, favor de hacerme llegar<br/>un mensaje, el cual será <br/>contestado a la brevedad<br/>posible.<br/><br/>Gracias por tu interés.
</p>
<br />
<h3>Índice de la página</h3>
<ul>
<li><ul>
<li><a href="aboutus.html">Acerca de...</a> Información sobre la administradora de esta página web.</li>
<li><a href="portafolio.html">Portafolio</a> - Muestrario de trabajos realizados con anterioridad.</li>
<li><a href="servicios.html">Servicios</a> - Información detallada de los servicios que ofrezco.</li>
<li><a href="contacto.html">Contacto</a> - Área donde podrás enviarme tu mensaje.</li>
</ul>
</li>
</ul>
<br/>
<h3>Validados en:</h3>
<p class="valid"><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:78px;height:29px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="¡CSS Válido!"/></a>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:78px;height:29px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict"/></a></p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>| <a href="http://www.aurora.elementfx.com">Aurora Carranza</a> Copyright © 2010 |</p>
</div>
</body>
</html>
Código:
Espero no sea muy complicado lo que he hecho y lo que pido, desde ya gracias por su ayuda =) function evaluaNombre(nombre){
var reg = new RegExp("^([a-zA-Z]+){1,}\\s(([a-zA-Z])+)");
if(nombre.match(reg)){
return true;
} else{
return false;
}
}
function evaluaMail(mail){
var reg = new RegExp("^[A-Za-z0-9-_\.]{2,}@[A-Za-z0-9]{2,}((\.[a-z]{2,})+)?$");
if(mail.match(reg)){
return true;
} else{
return false;
}
}
function evaluaFecha(fecha){
var reg = new RegExp("^([0-3][0-9])(/[0-1][0-9])(/[2][0][0-9][0-9])?$");
if(fecha.match(reg)){
return true;
} else{
return false;
}
}
function evaluaAsuntoMsg(asuntoMsg){
var reg = new RegExp("^(.{1,})\\s*$");
if(asuntoMsg.match(reg)){
return true;
} else{
return false;
}
}
function evaluaMensaje(mensaje){
var reg = new RegExp("^(.{1,})\\s*$");
if(mensaje.match(reg)){
return true;
} else{
return false;
}
}
function validar(){
var nombre = document.getElementById("Nombre").value;
var mail = document.getElementById("Email").value;
var fecha = document.getElementById("Fecha").value;
var asunto = document.getElementById("Asunto").value;
var mensaje = document.getElementById("Mensaje").value;
if(!evaluaNombre(nombre)){
alert("Escribe tu nombre correctamente (Nombre y primer apellido). No incluyas acentos");
document.getElementById("Nombre").value = "";
document.getElementById("Nombre").focus();
return false;
} else{
if(!evaluaMail(mail)){
alert("Escribe una direccion de correo valida");
document.getElementById("Email").value = "";
document.getElementById("Email").focus();
return false;
} else{
if(!evaluaFecha(fecha)){
alert("Escriba una fecha correcta, en el formato dd/mm/aaaa");
document.getElementById("Fecha").value = "";
document.getElementById("Fecha").focus();
return false;
} else{
if(!evaluaAsuntoMsg(asunto)){
alert("Por favor escribe el asunto del mensaje");
document.getElementById("Asunto").value = "";
document.getElementById("Asunto").focus();
return false;
} else{
if(!evaluaMensaje(mensaje)){
alert("Por favor escribe el mensaje");
document.getElementById("Mensaje").value = "";
document.getElementById("Mensaje").focus();
return false;
} else{
return true;
}}}}}}
