Visualización
Este es un ejemplo de Control de formulario.
En este caso se han puesto en práctica las siguientes expresiones regulares:
- var expresion_regular_nombre = /^[A-Za-záéíóúñ]{2,}([\s][A-Za-záéíóúñ]{2,})+$/; //Una palabra o varias palabras (solo letras)
- var expresion_regular_dni = /^\d{8}[A-Z]$/; //8 cifras numéricas más letra Mayúscula
- var expresion_regular_telefono = /^\d{9}$/; //9 cifras numéricas
- var expresion_regular_mail = /^(.+\@.+\..+)$/; //Que contenga una arroba y un punto
- var expresion_regular_codigo = /^\d{5}$/; //5 Caracteres numéricos
CÓDIGO HTML
<form id="form" onsubmit="return validacion(this)">
<p>¿Quieres contactar con nosotros o suscribirte a nuestra newsletter? </p>
<p>Escríbenos o déjanos tu e-mail y tu nombre!</p>
<div id="mensajes" style='display:none;' class="mensajes"><img src="errores.png"/> Ouh! Lo siento, has introducido datos incorrectos</div>
<br></br><br><br>
Nombre y apellidos *: <input type="text" id="campo1" placeholder="Nombre Apellidos" required onblur="validacionnom(form)">
<br><br>
NIF/CIF: <input type="text" class="cajachula" id="dni" placeholder="12345678A" onblur="validaciondni(form)" onfocus="enfoco()">
<br><br>
Teléfono: <input type="text" id="Telefono" placeholder="123456789" onblur="validaciontel(form)" onfocus="enfoco2()">
<br><br>
Email *: <input type="email" name="Email" id="useremail" placeholder="nombre@dominio.com" required onblur="validacionmail(form)" onfocus="enfoco3()">
<br><br>
Dirección: <input type="text" name="Dirección" id="dir" placeholder="C/ Calle nº 3 Portal 1 Piso 3º Letra A" onblur="validaciondirec(form)">
<br><br>
Codigo Postal: <input type="text" name="Código Postal" id="codigo" placeholder="12345" onblur="validacioncod(form)" onfocus="enfoco4()">
<br></br>
Consulta: <TEXTAREA COLS=20 ROWS=10 id="cajatext" NAME="texto" onfocus="enfoco5()">
</TEXTAREA>
<br><br>
<p>* Campos obligatorios.</p>
<br></br>
<input type="submit" value="Enviar" name="Enviar" />
</form>
</div>
</div>
CÓDIGO JAVASCRIPT
<script>
//Devolver el marco original a los inputs al poner el foco en otro
function enfoco()
{
document.getElementById('campo1').style.border= '';
document.getElementById('mensajes').style.display = 'none';
}
function enfoco2()
{
if(form.dni.value!='')//Volvemos a dejar el formulario como estaba en caso de éste encontrarse vacío, si no, se queda validado(marco verde) o incorrecto (marco rojo)
{
document.getElementById('mensajes').style.display = 'none';
document.form.dni.reset()//Intento reiniciar a cero el campo pero no funca
}
else
{
document.getElementById('dni').style.border = '';
}
}
function enfoco3()
{
if(form.Telefono.value!='')//Volvemos a dejar el formulario como estaba en caso de éste encontrarse vacío, si no, se queda validado(marco verde) o incorrecto (marco rojo)
{
document.getElementById('mensajes').style.display = 'none';
}
else
{
document.getElementById('Telefono').style.border= '';
}
}
function enfoco4()
{
if(form.useremail.value!='')//Volvemos a dejar el formulario como estaba en caso de éste encontrarse vacío, si no, se queda validado(marco verde) o incorrecto (marco rojo)
{
document.getElementById('mensajes').style.display = 'none';
}
else
{
document.getElementById('useremail').style.border= '';
}
}
function enfoco5()
{
if(form.codigo.value!='')//Volvemos a dejar el formulario como estaba en caso de éste encontrarse vacío, si no, se queda validado(marco verde) o incorrecto (marco rojo)
{
document.getElementById('mensajes').style.display = 'none';
}
else
{
document.getElementById('codigo').style.border= '';
}
}
//Expresion regular para controlar que se introduzcan nombres y apellidos que empiecen por letra mayúscula
//Funcion para cambiar el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validacionnom(form) {
var expresion_regular_nombre = /^[A-Za-záéíóúñ]{0,40}([\s][A-Za-záéíóúñ]{0,40})+$/; //Varias palabras empezando por Mayúsculas
if((expresion_regular_nombre.test(form.campo1.value)==false) && form.campo1.value!='') {
document.getElementById('campo1').style.border= '2px solid red';
document.getElementById('campo1').focus()
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.campo1.value!='')
{
document.getElementById('campo1').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
}
//Expresion regular para controlar que el usuario introduzca ocho dígitos y una letra.
//Esta funcion resalta el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validaciondni(form)
{
var expresion_regular_dni = /^\d{8}[A-Z]$/; //8 cifras numéricas más letra Mayúscula
if((expresion_regular_dni.test(form.dni.value)==false) && form.dni.value!='') {
document.getElementById('dni').style.border= '2px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.dni.value!='')
{
document.getElementById('dni').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
}
//Expresion regular para controlar que el usuario introduzca nueve números.
//Funcion para cambiar el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validaciontel(form) {
var expresion_regular_telefono = /^\d{9}$/; //9 cifras numéricas
if((expresion_regular_telefono.test(form.Telefono.value)==false) && form.Telefono.value!='') {
document.getElementById('Telefono').style.border= '2px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.Telefono.value!='')
{
document.getElementById('Telefono').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
}
//Expresion regular para controlar que el usuario introduzca una dirección de correo electrónico válida.
//Funcion para cambiar el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validacionmail(form) {
var expresion_regular_mail = /^(.+\@.+\..+)$/; //Que contenga palabra, un arroba, palabra, punto, palabra (todo seguido)
if((expresion_regular_mail.test(form.useremail.value)==false) && form.useremail.value!='') {
document.getElementById('useremail').style.border= '2px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.useremail.value!='')
{
document.getElementById('useremail').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
}
//Expresion regular para controlar que el usuario introduzca cinco dígitos
//Funcion para cambiar el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validacioncod(form) {
var expresion_regular_codigo = /^\d{5}$/; //5 Caracteres numéricos
if((expresion_regular_codigo.test(form.codigo.value)==false) && form.codigo.value!='') {
document.getElementById('codigo').style.border= '2px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.codigo.value!='')
{
document.getElementById('codigo').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
}
//FUNCION GLOBAL QUE COMPRUEBA TODOS LOS CAMPOS ANTES DE ENVIAR
//Función que ejecuta el evento onSubmit que comprueba al menos los campos obligatorios antes de enviar el formulario.
//Funcion para cambiar el color de la caja del formulario a verde si es correcto y a rojo si es incorrecto
function validacion(form) {
var expresion_regular_nombre = /^[A-Za-záéíóúñ]{2,}([\s][A-Za-záéíóúñ]{2,})+$/; //Una palabra o varias palabras (solo letras)
var expresion_regular_dni = /^\d{8}[A-Z]$/; //8 cifras numéricas más letra Mayúscula
var expresion_regular_telefono = /^\d{9}$/; //9 cifras numéricas
var expresion_regular_mail = /^(.+\@.+\..+)$/; //Que contenga una arroba y un punto
var expresion_regular_codigo = /^\d{5}$/; //5 Caracteres numéricos
if(expresion_regular_nombre.test(form.campo1.value)==false) {
document.getElementById('campo1').style.border= '3px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
document.getElementById('campo1').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
}
if((expresion_regular_dni.test(form.dni.value)==false) && form.dni.value!='') {
document.getElementById('dni').style.border= '3px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.dni.value!='')
{
document.getElementById('dni').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
if((expresion_regular_telefono.test(form.Telefono.value)==false) && form.Telefono.value!='') {
document.getElementById('Telefono').style.border= '3px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.Telefono.value!='')
{
document.getElementById('Telefono').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
if((expresion_regular_codigo.test(form.codigo.value)==false) && form.codigo.value!='') {
document.getElementById('codigo').style.border= '3px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
if(form.codigo.value!='')
{
document.getElementById('codigo').style.border= '2px solid #3aba0f';
document.getElementById('mensajes').style.display = 'none';
return true;
}
}
if(expresion_regular_mail.test(form.useremail.value)==false) {
document.getElementById('useremail').style.border= '3px solid red';
document.getElementById('mensajes').style.display = 'block';
return false; //sale de la funcion y NO envía el formulario
}
else
{
document.getElementById('useremail').style.border= '2px solid #3aba0f';
document.getElementById('codigo').style.border= '2px solid #3aba0f';
document.getElementById('Telefono').style.border= '2px solid #3aba0f';
document.getElementById('dni').style.border= '2px solid #3aba0f';
document.getElementById('dir').style.border= '2px solid #3aba0f';
document.getElementById('cajatext').style.border= '2px solid #3aba0f';
alert('¡Gracias por rellenar nuestro formulario correctamente!\n\nAtenderemos tu petición lo más brevemente posible');
return true; // sale de la función y SÍ envía el formulario
}
}
</script>
