Aqui va el código html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script type="text/javascript">
function isNotEmpty(elem) {
var str = elem.value;
var re = /.+/;
if(!str.match(re)) {
alert("Por favor, rellena los campos vacíos.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
function isNumber(elem) {
var str = elem.value;
var re = /^[-]?\d*\.?\d*$/;
str = str.toString();
if (!str.match(re)) {
alert("Introduce sólo números en este campo.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
return true;
}
function isEMailAddr(elem) {
var str = elem.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("Por favor, comprueba tu direccón e-mail: está vacía o parece incorrecta.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
function isChosen(select) {
if (select.selectedIndex == 0) {
alert("Por favor, escoge una opción de la lista.");
return false;
} else {
return true;
}
}
function isValidRadio(radio, mensaje) {
var valid = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
}
alert(mensaje);
return false;
}
function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
elem.focus();
elem.select();
}
//per mostrar o amagar parts del formulari
function togglePurDec(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var block = document.getElementById("purchaseDecisionData");
if (target.id == "n_inscrits1") {
block.style.display = "block";
} else {
block.style.display = "none";
}
}
// batch validation router
function validateForm(form) {
if(isValidRadio(form.n_inscrits, 'Escoge el número de inscripciones que deseas realizar.')){
if (isNotEmpty(form.nombre)) {
if (isNotEmpty(form.apellidos)) {
if (isChosen(form.edad)) {
if (isNotEmpty(form.direccion)) {
if (isNotEmpty(form.poblacion)) {
if (isNotEmpty(form.provincia)) {
if(isNumber(form.cp)) {
if (isNotEmpty(form.telefono)) {
if(isNumber(form.telefono)){
if(isNumber(form.telefono_movil)){
if (isEMailAddr(email)){
if(isValidRadio(form.estudiante, 'Por favor, indica si eres estudiante o no')){
if(isValidRadio(form.curso, 'Por favor, selecciona tu curso')){
return true;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
return false;
}
</script>
</head>
<body>
<div id="contenedor">
<div id="navBar">
<div id="sectionLinks">
</div> <br class="clear" />
</div><!--fi navBar -->
<div id="contingut">
<h3 class="roig">FORMULARIO DE INSCRIPCIÓN </h3>
<fieldset><form name="inscripcion" id="inscripcion" method="POST" action="" onsubmit="return validateForm(this)" >
<h4 class="blau" >Número de inscripciones</h4>
<p class="vermell"> Seleccione una de las dos opciones</p>
<table><tr><td width="114" align="right"><span>1 persona </span></td>
<td width="53" align="left">
<input name="n_inscrits" type="radio" id="n_inscrits0" onclick="togglePurDec(event)" value="1" />
</td>
</tr>
<tr>
<td align="right"><span>2 personas </span></td>
<td align="left">
<input type="radio" name="n_inscrits" id="n_inscrits1" value="2" onclick="togglePurDec(event)"/>
</td>
</tr>
</table>
<br /><br />
<div id="purchaseDecisionData" style="display:none" ><p>En este primer formulario introduce <span class="vermell"><strong>sólo</strong></span> los datos del titular de la tarjeta, <span class="vermell"><strong>no los del acompañante</strong></span>.</p></div>
<label for="nombre"> Nombre <span class="roig">*</span> </label>
<input name="nombre" type="text" id="nombre" onchange="isNotEmpty(this)" size="60" maxlength="60"/>
<label for="apellidos"> Apellidos <span class="roig">*</span> </label>
<input name="apellidos" type="text" id="apellidos" onchange="isNotEmpty(this)" size="60" maxlength="60"/>
<label for="edad">Edad<span class="roig">*</span> </label>
<select name="edad" id="edad">
<option selected="selected" value="">--Seleccione un valor--</option>
<option value="-20">Menos de 20</option>
<option value="20-30">Entre 20 - 30</option>
<option value="30-40">Entre 30 - 40</option>
<option value="40-50">Entre 40 - 50</option>
<option value="50-60">Entre 50 - 60</option>
<option value="+60">Más de 60</option>
</select>
<label for="pais">País de residencia<span class="roig">*</span> </label>
<select name="pais" id="pais">
<option>France</option>
<option>Italy</option>
<option>Spain</option>
</select>
Dirección
<label for="direccion">Dirección (Calle, Avda, Plaza...)<span class="roig">*</span> <span class="textgris">Ejemplo: Avda. de las Flores ,84 1º 4ª</span> </label>
<input name="direccion" type="text" id="direccion" size="90" onchange="isNotEmpty(this)"/>
<label for="poblacio">Población <span class="roig">*</span> </label>
<input name="poblacio" type="text" id="poblacio" size="60" onchange="isNotEmpty(this)"/>
<label for="cp">Código Postal <span class="roig"></span> </label>
<input name="cp" type="text" id="cp" size="12" maxlength="5" onchange="isNumber(form.cp)"/>
<label for="provincia">Província <span class="roig">*</span></label>
<input name="provincia" type="text" id="provincia" size="60" onchange="isNotEmpty(this)"/>
<label for="telefono">Teléfono fijo <span class="roig">*</span> </label>
<input name="telefono" type="text" id="telefono" size="30" onchange="if (isNotEmpty(this)) {isNumber(form.telefono)}"/>
<label for="telefono_movil">Teléfono movil <span class="textgris">(opcional) </span></label>
<input name="telefono_movil" type="text" id="telefono_movil" size="30" onchange="isNumber(this)"/>
<label for="email">E-mail <span class="textgris">(opcional) </span></label>
<input name="email" type="text" id="email" size="90" onchange="isEMailAddr(email)" />
<table width="160" >
<tr><td colspan="4"><label for="estudiante">¿Eres Estudiante? <span class="roig">*</span> </label></td>
</tr>
<tr>
<td width="30" align="right"><span>Sí </span></td>
<td width="30" align="left">
<input name="estudiante" type="radio" id="estudianteSi" value="Si" /> </td>
<td width="30"align="right"><span>No </span></td>
<td align="left">
<input name="estudiante" type="radio" id="estudianteNo" value="No" /> </td>
</tr>
<tr><td colspan="4" align="left"><label for="curso">Indica el curso</label></td></tr>
<tr >
<td width="30" align="right"><span>1º</span></td>
<td width="30" align="left">
<input name="curso" type="radio" id="cursoSi" value="Si" /></td>
<td width="30" align="right"><span>2º </span></td>
<td align="left">
<input name="curso" type="radio" id="cursoNo" value="No" /> </td>
</tr>
<br />
</table>
<label for="SendCom"> </label>
<input name="SendCom" type="submit" id="SendCom" value="Enviar Inscripción" onclick="if(validateForm(this.form)) {this.form.submit()}" />
<input name="Borrar" type="reset" value="Borrar" />
</form>
</fieldset>
<p align="right"><a href=javascript
:history.go(-1)()>Volver</a></p >
<br class="clear" />
</div>
<!--fi CONTINGUT -->
<br class="clear" />
<div id="peu"></div>
</div><!--fi CONTENEDOR-->
</body>
</html>
Gracias por tu ayuda
