Todos los campos del formulario obligatorios

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.

Crear el formulario

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>

Aplicar la clase allrequired

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>

Cargar la librería wForms

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>