Home

SIGPA

Formularios

Los formularios deben cumplir con la sintaxis de Bootstrap y a demás de esto, SIGPA necesitará algunos agregados según el tipo de formulario.

• Común:

   <form method="_MÉTODO_HTTP_" action="_SCRIPT_" role="form">
   </form>

  Atributos:

  • method: Método por el cual se enviará el formulario. Ej: method="POST".
  • action: Script que recibirá y procesará los datos. Ej: action="guardar.php".
  • role: Aunque su uso sea semántico, SIGPA aprovechará este atributo para establecer ciertas configuraciones por lo que no es opcional.

  Ejemplo:

   <form method="POST" action="guardar.php" role="form">
   	<div class="form-group">
   		<input type="text" name="nombre" placeholder="Nombre" class="form-control" />
   		<p class="help-block">Ingrese su nombre</p>
   	</div>
  
   	<input type="submit" value="Guardar" class="btn btn-lg btn-primary" />
   </form>

  
  Atributos extras:

  • data-exe: Permite ejecutar alguna(s) sentencia(s) si los datos del formulario se guardan satisfactóriamente. Ej: data-exe="$(location).attr('href', '.')".

  Ejemplo:

   <form method="POST" action="guardar.php" data-exe="alert('Se ejecuta al guardar!')" role="form">

• Búsqueda:

   <form action="_SCRIPT_" role="search">
   </form>

  Atributos:

  • action: Script que recibirá y procesará los datos. Ej: action="buscador.php".
  • role: Aunque su uso sea semántico, SIGPA aprovechará este atributo para establecer ciertas configuraciones por lo que no es opcional.

  Ejemplo:

   <!-- Con estilo de formulario común -->
   <form action="carga.php" role="search">
   	<div class="form-group">
   		<input type="text" name="cédula" placeholder="Cédula" class="form-control" />
   		<p class="help-block">Ingrese la cédula del profesor a consultar</p>
   	</div>
  
   	<input type="submit" value="Consultar" class="btn btn-lg btn-primary" />
   </form>
  
   <!-- Con estilo de campo de búsqueda -->
   <form action="buscar.php" role="search">
   	<div class="input-group custom-search-form">
   		<input type="search" name="busqueda" class="form-control" placeholder="Buscar...">
  
   		<span class="input-group-btn">
   			<button class="btn btn-default" onClick="embem('buscar.php', '#page-wrapper', getForm(this))" type="button">
   				<i class="fa fa-search"></i>
   			</button>
   		</span>
   	</div>
   </form>

  
  Atributos extras:

  • data-obj: Permite cambiar el elemento donde se almacenará la respuesta del servidor. Ej: data-obj="#otroElemento".

  Ejemplo:

   <form action="buscar.php" data-obj="#resultado" role="search">

Campos

Validación:

Es posible asignar tipos de datos a los campos con la finalidad de permitir solo los caracteres especificados (con expresiones regulares). SIGPA ya conoce ciertos tipos de datos:

• Numérico (num): Numeros, /[0-9]/.
• Alfanumérico (alf): Lestras y números, /[a-zA-Z0-9]/.
• Texto (text): Caracteres alfabéticos y espacios, /[a-zA-Z\sñÑáÁéÉíÍóÓúÚ]/.

Para poder habilitar la validación hace falta agregar el atributo data-type:

<input type="text" name="nombre" placeholder="Nombre" class="form-control" data-type="text" />

<!-- Expresión regular personalizada -->
<input type="text" name="numero" placeholder="Número" class="form-control" data-type="/[0-5]/" />

Tambien es posible modificar el mensaje de alerta por medio del atributo data-msg:

<input type="text" name="numero" placeholder="Número" class="form-control" data-type="/[0-5]/" data-msg="El número indicado no puede ser menor a 0 o mayor a 5" />

Verificación:

SIGPA puede verificar que los datos ingresados ya existan en la base de datos por medio del atributo onKeyUp="Verif(this)".

<!-- Mostrará error si ya existe el valor ingresado -->

<form name="area" method="POST" action="guardar.php" role="form">
	<div class="form-group">
		<input type="text" name="nombre" placeholder="Nombre" class="form-control" data-type="text" onKeyUp="Verif(this)" required="required" />
		<p class="help-block">Debe indicar el nombre del área, por ejemplo: Tecnología.</p>
	</div>

<!-- Mostrará error si no existe el valor ingresado -->

<form name="usuario" method="POST" action="reestablecer.php" role="form">
	<div class="form-group">
		<div class="input-group" title="Ingrese su cédula de indentidad">
			<input type="text" name="cedula" placeholder="Cédula" class="form-control" data-type="num" onKeyUp="Verif(this, true)" required="required" />
			<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
		</div>
	</div>

Para que SIGPA sepa en que tabla se realizará la comprobación se recomienda asignarle al atributo name al formulario con el nombre de la tabla, pero en caso de que no sea posible o conveniente se debe alterar el atributo onKeyUp del campo.

onKeyUp="Verif(this, 'area')"

<!-- Modo invertido -->

onKeyUp="Verif(this, 'area', true)"