feed twitter facebook LinkedIn facebook

wForms » Todos los campos del formulario obligatorios

octubre 28, 2007 por Víctor Cuervo 1 Comentario Imprimir Imprimir

De una forma muy sencilla y utilizando wForms haremos que un conjunto de campos de un formulario se conviertan en obligatorios.

En el artículo Campos obligatorios de un formulario con wForms podíamos ver como conseguir que un campo fuese obligatorio, indicándoselo directamente al campo. En este caso haremos que un conjunto de elementos de un formulario sean obligatorios.

Lo primero que vamos a escribir son los campos del formulario que queremos que sean obligatorios. El formulario va a ser algo sencillo: un campo de texto, un área de texto y uno de selección.

<form>
<label for="texto">Texto:</label><input type="text" id="texto"><br/>
<label for="area">Area:</label><textarea rows="10" cols="20" id="area"></textarea><br/>
<label for="seleccion">Seleccion:</label>
<select id="seleccion">
<option value="">Seleciona una opción...</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select><br/>
<input type="submit" value="Enviar"/>
</form>

Para delimitar los campos del formulario que queremos que sean obligatorios, los vamos a rodear por una capa <DIV>. Además a esta capa le vamos a asignar la clase "allrequired" definida en wForms mediante el atributo class.

<form>
<div class="allrequired">
<label for="texto">Texto:</label><input type="text" id="texto"><br/>
<label for="area">Area:</label><textarea rows="10" cols="20" id="area"></textarea><br/>
<label for="seleccion">Seleccion:</label>
<select id="seleccion">
<option value="">Seleciona una opción...</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select><br/>
</div>
<input type="submit" value="Enviar"/>
</form>

Ya, solo nos quedará el instanciar la librería wForms. Para ello añadiremos en la cabecera el siguiente código JavaScript:

<script type="text/javascript" src="wforms.js"></script>

Visualizar el ejemplo | Descargar el código

tags:

Artículos relacionados:

1 comentario »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Juan
    diciembre 6, 2014 #

    Gracias pero no me ha funcionado.(Y)

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*