JAVASCRIPT
Laboratorio 1 (Campos Obligatorio)
JAVASCRIPT:
Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el navegador el que lo interpreta
(ejecuta). Es decir, el JavaScript es un lenguaje interpretado, no compilado (no se genera ningún tipo de fichero objeto
o exe).
No confundir el JavaScript con el Java. El Java es un lenguaje de programación de propósito general como lo son el
C++ o el Visual Basic.
Elemento text
Crear validar_text.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_text y obj es el argumento para llamar a los elementos dentro del formulario
function validar_text(obj){
var ci = [Link]; //ci es la variable, cedula es el NAME del elemento y value el valor
if (!ci){ //Verificar si el valor de cedula esta vacío
alert ("La cedula es obligatoria.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo cedula
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return valida_text(this)"
según sea la función que corresponda. Que al presionar el botón SUBMIT llamara la función JavaScript
antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_text(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con el elemento TEXT
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de Elemento "TEXT" en JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_text(this)" method='POST' action='[Link]'>
<table align='center' border='1'>
<caption><B>Campo Obligatorio.</B></caption>
<tr>
<td>Cedula:</td>
<td><input type='text' name='cedula' size='10' maxlength='8' value=''></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
NOTA: Esta validación con elemento de tipo TEXT, también es similar al del elemento de tipo PASSWORD
Elemento textarea
Crear validar_textarea.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_textarea y obj es el argumento para llamar a los elementos dentro del formulario
function validar_textarea(obj){
var dir = [Link]; //dir es la variable, direccion es el NAME del elemento y value el valor
if (!dir){ //Verificar si el valor de direccion esta vacío
alert ("La Direccion es obligatoria.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo direccion
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return valida_textarea(this)"
según sea la función que corresponda. Que al presionar el botón SUBMIT llamara la función JavaScript
antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_textarea(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con el elemento TEXTAREA
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de Elemento "TEXTAREA" en JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_textarea(this)" method='POST' action='[Link]'>
<table align='center' border='1'>
<caption><B>Campo Obligatorio.</B></caption>
<tr>
<td>Direccion:</td>
<td><textarea name="direccion" rows="3" maxlength="50" style="resize: none"
></textarea></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
Elemento radio
Crear validar_radio.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_radio y obj es el argumento para llamar a los elementos dentro del formulario
function validar_radio(obj){
var sex = [Link]("sexo"); //sex es la variable, sexo es el NAME del elemento
if (sex[0].checked==false && sex[1].checked==false){ //Verificar si el valor de sex esta vacío
alert ("Seleccione el sexo.!"); //Mensaje al usuario
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return valida_radio(this)"
según sea la función que corresponda. Que al presionar el botón SUBMIT llamara la función JavaScript
antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_radio(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con el elemento RADIO
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de Elemento "RADIO" en JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_radio(this)" method='POST' action='[Link]'>
<table align='center' border='1'>
<caption><B>Campo Obligatorio.</B></caption>
<tr>
<td>Sexo:</td>
<td>
<input type="radio" value="F" name="sexo" /> Femenino
<input type="radio" value="M" name="sexo" /> Masculino
</td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
Elemento select
Crear validar_select.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_select y obj es el argumento para llamar a los elementos dentro del formulario
function validar_select(obj){
var mun = [Link]("municipio");//mun es la variable, municipio es el ID del elemento
if ([Link]==false){ //Verificar si el valor de mun esta vacío
alert ("Seleccione el municipio.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo municipio
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
</html>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return valida_select(this)"
según sea la función que corresponda. Que al presionar el botón SUBMIT llamara la función JavaScript
antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_select(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con el elemento SELECT
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de Elemento "SELECT" en JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_select(this)" method='POST' action='[Link]'>
<table align='center' border='1'>
<caption><B>Campo Obligatorio.</B></caption>
<tr>
<td>Municipio:</td>
<td>
<select name="municipio" id="municipio" style="width: 100%;">
<option value="" selected="selected">....</option>
<option value="SFE">San Felipe</option>
<option value="IND">Independencia</option>
<option value="COC">Cocorote</option>
<option value="SUC">Sucre</option>
<option value="BRU">Bruzual</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
Elemento checkbox
Crear validar_checkbox.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_checkbox y obj es el argumento para llamar a los elementos dentro del formulario
function validar_checkbox(obj){
//validar el ID de los checkbox
var actividad1 = [Link]("actividad1");
var actividad2 = [Link]("actividad2");
var actividad3 = [Link]("actividad3");
if ([Link]==false && [Link]==false && [Link]==false){
//Verificar si el valor de los checkbox esta vacío
alert ("Seleccione al menos una actividad.!"); //Mensaje al usuario
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return
validar_checkbox(this)" según sea la función que corresponda. Que al presionar el botón SUBMIT llamara
la función JavaScript antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_checkbox(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con el elemento CHECKBOX
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de Elemento "CHECKBOX" en JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_checkbox (this)" method='POST'
action='[Link]'>
<table align='center' border='1'>
<caption><B>Campo Obligatorio.</B></caption>
<tr>
<td>Actividad:</td>
<td>
<input type="checkbox" name="actividad1" id="actividad1" autocomplete="off"
value="Trabaja">
<label>Trabaja</label>
<label> </label>
<input type="checkbox" name="actividad2" id="actividad2" autocomplete="off"
value="Deporte">
<label>Deporte</label>
<label> </label>
<input type="checkbox" name="actividad3" id="actividad3" autocomplete="off"
value="Estudia">
<label>Estudia</label>
</td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
Validar Elementos obligatorios
Crear validar_obligatorio.html
Paso1
El código JavaScript se encierra entre etiquetas <script> y se recomienda definir el código dentro de la cabecera del
documento HTML (dentro de la etiqueta <head>).
Colocar dentro del HEAD
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titulo del archivo Html</title>
<script language="Javascript">
//La función se llama validar_todo es el argumento para llamar a los elementos dentro del formulario
function validar_todo(obj){
var ci = [Link]; //ci es la variable, cedula es el NAME del elemento y value el valor
if (!ci){ //Verificar si el valor de cedula esta vacío
alert ("La cedula es obligatoria.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo cedula
return false; //Retorna false para no avanzar al siguiente elemento
}
var dir = [Link]; //dir es la variable, direccion es el NAME del elemento y value el valor
if (!dir){ //Verificar si el valor de direccion esta vacío
alert ("La Direccion es obligatoria.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo direccion
return false; //Retorna false para no avanzar al siguiente elemento
}
var sex = [Link]("sexo"); //sex es la variable, sexo es el NAME del elemento
if sex[0].checked==false && sex[1].checked==false){ //Verificar si el valor de sex esta vacío
alert ("Seleccione el sexo.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo sexo
return false; //Retorna false para no avanzar al siguiente elemento
}
var mun = [Link]("municipio");//mun es la variable, municipio es el ID del elemento
if ([Link]==false){ //Verificar si el valor de mun esta vacío
alert ("Seleccione el municipio.!"); //Mensaje al usuario
[Link](); //focus() es para posicionarse el curso en el campo municipio
return false; //Retorna false para no avanzar al siguiente elemento
}
//validar el ID de los checkbox
var actividad1 = [Link]("actividad1");
var actividad2 = [Link]("actividad2");
var actividad3 = [Link]("actividad3");
if ([Link]==false && [Link]==false && [Link]==false){
//Verificar si el valor de los checkbox esta vacío
alert ("Seleccione al menos una actividad.!"); //Mensaje al usuario
return false; //Retorna false para no avanzar al siguiente elemento
}
}
</script>
</head>
Paso 2
Llamar la función dentro de la etiqueta form como este ejemplo onSubmit="return validar_todo(this)"
según sea la función que corresponda. Que al presionar el botón SUBMIT llamara la función JavaScript
antes de avanzar a la siguiente página.
<form name='form' method='POST' onSubmit="return validar_todo(this)" action='[Link]'>
Paso 3
Se construye las etiquetas de HTML con todos los elementos del formulario
<BODY bgcolor='#0099cc'>
<center>
<h1>Validacion de todos los Elemento con JavaScript.!</h1>
<br/><br/>
</center>
<form name='form' onSubmit="return validar_todo(this)" method='POST' action='[Link]'>
<table align='center' border='1'>
<caption><B>Campos Obligatorios.</B></caption>
<tr>
<td>Cedula:</td>
<td><input type='text' name='cedula' size='10' maxlength='8' value=''></td>
</tr>
<tr>
<td>Direccion:</td>
<td><textarea name="direccion" rows="3" maxlength="50" style="resize: none" ></textarea></td>
</tr>
<tr>
<td>Sexo:</td>
<td>
<input type="radio" value="F" name="sexo" /> Femenino
<input type="radio" value="M" name="sexo" /> Masculino
</td>
</tr>
<tr>
<td>Municipio:</td>
<td>
<select name="municipio" id="municipio" style="width: 100%;">
<option value="" selected="selected">....</option>
<option value="SFE">San Felipe</option>
<option value="IND">Independencia</option>
<option value="COC">Cocorote</option>
<option value="SUC">Sucre</option>
<option value="BRU">Bruzual</option>
</select>
</td>
</tr>
<tr>
<td>Actividad:</td>
<td>
<input type="checkbox" name="actividad1" id="actividad1" autocomplete="off"
value="Trabaja">
<label>Trabaja</label>
<label> </label>
<input type="checkbox" name="actividad2" id="actividad2" autocomplete="off"
value="Deporte">
<label>Deporte</label>
<label> </label>
<input type="checkbox" name="actividad3" id="actividad3" autocomplete="off"
value="Estudia">
<label>Estudia</label>
</td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Aceptar'></td>
</tr>
</table>
</form>
</BODY>
Guía para orientar el cómo utilizar las
validaciones en JAVASCRIPT para elementos del
formulario obligatorios en HTML, tendrán
ejercicios para practicar en sus horas
independientes.
Estos ejercicios son para consumo propio y
no para ser evaluados.
Ing. Roberth Mujica