Saltar la navegación

Práctica JS

Objetivos

En esta práctica te propongo realizar un formulario de Registro dentro del proyecto "Tutorías" y validar los controles del formulario usando JS o jQuery.

La Imagen siguiente muestra el formulario que se persigue:

Formulario registro - practica

Las instrucciones de la práctica para lograr el formulario de la figura se encuentran a continuación. 

NOTA: La última columna de la tabla muestra el puntaje a obtener por el logro de cada requerimiento.

Práctica: Validación de Formulario de Registro

Cod.

Descripción

Puntuación

1

Crear un formulario de registro en la aplicación tutorías. Crear el controlador respectivo para el funcionamiento. El formulario debe consistir en los campos indicados en la figura. Respetar el nombre de los controles (color verde) y los “placeholders”. Los cambos txtNombre, txtApellido, txtCorreo, txtClave, txtClaveConfirmacion deben ser requeridos.

En el tag <form> incluir el manejador de evento: onsubmit:

<form id="formulario-registro" … onsubmit="return validar();">

2

2

Crear los siguientes directorios: WebContent/js y WebContent/css. En el primer directorio crear un fichero con el nombre “validaciones.js”. En el segundo directorio crear un fichero con el nombre “estilos.css”.

 

Validaciones ejecutadas al pulsar botón “Registrarse”. - Las validaciones deben ser codificadas en el fichero WebContent/js/validaciones.js. Para las validaciones puedes utilizar jQuery o JS tradicional.

3

Longitud de textos: El texto introducido en txtNombre y txtApellido deben tener una longitud mínima de 2 caracteres.

0,5

4

Correo: El texto introducido en txtCorreo debe contener el símbolo “@”.

0,5

5

Contraseñas iguales: el texto en txtClaveConfirmacion debe ser igual que el introducido en txtClave.

1

6

Completitud: Las listas desplegables, excepto cmbDepartamento, deben tener una opción con el texto “Seleccione …” como se muestra en la figura. Esta opción debe tener el valor “-1” y debe estar seleccionada por defecto. Antes de enviar el formulario, se debe validar, que la opción seleccionada en la lista sea diferente al valor = -1.

1

7

Solo números: el txtOficina debe aceptar únicamente números. Por ejemplo, una oficina “4005C” no es permitida. La función JS para validar si un parámetro es número es la siguiente:

function isNumber(n) {
         return !isNaN(parseFloat(n)) && isFinite(n);
}

0,5

8

Mensajes de Error: Cada vez que se pulsa el botón “Registrarse” debe suceder dos cosas:

1.- Los errores en la validación deben presentarse en pantalla a través del <div id=”salida”></div>, indicado en el anexo. El div “salida” debe indicar los textos de validación en color rojo.

NOTA: Cada vez que se pulsa el botón “Registrarse” se debe limpiar el contenido del div “salida”.

2.- Cada control que presente problema en la validación debe incluir la clase “input-error”. Esta regla de estilo debe estar escrita en el fichero WebContent/css/estilos.css

.input-error{
         border: 1px solid red;
         background: #EEEEEE;
}

2

Número de Cédula: El número introducido en txtCedula debe ser una cedula válida. Se provee la función que valida una cédula válida:

function validarCedula(cedula) {
         var cad = cedula.trim();
         var total = 0;
         var longitud = cad.length;
         var longcheck = longitud - 1;

         if (cad !== "" && longitud === 10) {
                  for (i = 0; i < longcheck; i++) {
                           if (i % 2 === 0) {
                                    var aux = cad.charAt(i) * 2;
                                    if (aux > 9)
                                            aux -= 9;
                                    total += aux;
                           } else {
                                    total += parseInt(cad.charAt(i));
                           }
                  }

                  total = total % 10 ? 10 - total % 10 : 0;

                  if (cad.charAt(longitud - 1) == total) {
                           return true;
                  } else {
                           return false;
                  }
         }
}

0,5

 

Funcionalidades durante el ingreso a datos

 

10

Solo mayúsculas: Cada vez que se introduce un caracter en los controles txtNombre y txtApellido, el caracter debe transformase a Mayúsculas.

0,5

11

Selección de Perfil:

Dependiendo de la opción (“Estudiante” o “Docente”) seleccionada en el cmbPerfil, debe mostrarse el sector indicado con líneas entrecortadas como se indica con las líneas curvas entre el cmbPerfil y los sectores con línea entrecortada. Si un sector se muestra, el otro debe ocultarse. Si está seleccionada la opción “Seleccionar Perfil”, no debe aparecer ningún sector. En las validaciones indicadas posteriormente, considere únicamente la validación de los controles visibles. La funcionalidad de Selección Perfil debe ser codificada en el fichero WebContent/js/validaciones.js

1,5