Paso 3: Validar campos requeridos con JavaScript - Vista - index.jsp

Registrar a un usuario en un sitio Web (MVC)
Paso 3: Operativa

Vista - index.jsp - Validar campos requeridos con JavaScript

Nota: Para una pequeña introducción a JavaScript podemos ir a Apéndice - Introducción a JavaScript. Y para acceder a documentación JavaScript podemos ir a Apéndice - Guías y referencias de JavaScript.

Ahora vamos a comprobar que el nombre del usuario ha sido introducido a través de una función JavaScript.

Este es el código necesario para que la función validarCamposRequeridos(this) sea invocada al hacer clic sobre el botón Enviar del formulario

.
.
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Formulario Registro usuario</title>
  <link rel="stylesheet" href="/proregusuariomvc/css2/estilos.css" type="text/css">
  <script type="text/javascript">
   function validarCamposRequeridos(formulario){
    if(formulario.nombre.value == ""){
     window.alert('El nombre es requerido.')
     formulario.nombre.focus()
     return false
    }
    return true;
   }
  </script>
</head>
<body>
  <form onsubmit="return validarCamposRequeridos(this)"
        name="formularioRegistroUsuario"
        action="controlador" method="POST">

.
.

Como podemos observar NetBeans desde la versión 6.1 tiene un asistente de JavaScript. En este caso nos ayuda a escribir el atributo type del elemento <script>

NetBeans 6 - Asistente JavaScript - <script type>

en este otro caso nos ayuda a crear el evento onsubmit del formulario

NetBeans 6 - Asistente JavaScript - <form onsubmit>

y en este otro caso nos ayuda mostrándonos los métodos del objeto window

NetBeans 6 - Asistente JavaScript - window.alert(String message)

Ahora vamos a comprobar que los datos introducidos por el usuario en el campo de texto del password y el campo de texto de la confirmación de password coinciden. Si son diferentes aparecerá el siguiente aviso

Navegador - Alert - Los passwords introducidos no coinciden

al hacer clic sobre el botón Enviar, el cursor se posiciona en el campo de texto del password1 y los datos que se habían introducido se marcan para que el usuario vuelva a introducir el password

Navegador - Campo de texto Password seleccionado

Compara tu código con la solución propuesta

Ignasi Pérez Valls
Infosintesis Solutions Group

Febrero 2009

Dudas y comentarios: Foro [3-02] Implementar Patrón de diseño MVC

JavaDabbaDoo.org
Tu comunidad Java parlante. Cursos abiertos, tutoriales y mucho mucho más ...


	Implementar el patrón MVC
Inicio \| Cursos infosintesis.net liberados \| Java EE \| Registrar a un usuario en un sitio Web (MVC)