alert diferente para varios radios en un form

JordiSolanas · #1 (**permalink**) 28/08/2008, 13:07

Tengo varios radios diferentes en un formulario y quiero que me salga un "alert" diferente para cada uno en caso de que no estén seleccionados.
La función que tengo es:

function isValidRadio(radio) {
var valid = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
}

alert("Escoge el número de inscripciones que deseas realizar");
return false;

}

Gracias por vuestra ayuda.

David · #2 (**permalink**) 28/08/2008, 13:11

Puedes pasarle el mensaje en el alert como parámetro a la función.

Porque según lo que entendí tienes varios grupos de radios, y para cada grupo haces la validación, pero quieres que en cada grupo el mensaje sea diferente, ¿es así?.

JordiSolanas · #3 (**permalink**) 28/08/2008, 14:52

Si, así es.

La verdad es que no sé como hacer la respuesta que meas. ¿Pudes darme un ejemplo?

Gracias

David · #4 (**permalink**) 28/08/2008, 15:00

Pues obtener el texto del alert como parámetro de la función. Por ejemplo:

Código PHP:

  function isValidRadio(radio, mensaje) {

Y después en el alert mostrar ese parámetro:

Código PHP:

  alert(mensaje);

Lo único que tenemos que hacer es cambiar la llamada a la función con el mensaje que queremos mostrar:

Código PHP:

  isValidRadio(form.radio, 'Quiero este mensaje en el alert');

JordiSolanas · #5 (**permalink**) 28/08/2008, 15:10

Muchas gracias.
Ahora está todo claro.
Un saludo

JordiSolanas · #6 (**permalink**) 28/08/2008, 16:02

Ahora he intentado aplicar tu solución pero sólo me funciona en el primer grupo de radios, aunque hago la llamada a la función para cada grupo de radios:

function validateForm(form) {
if(isValidRadio(form.radio1, 'texto1......')){
if(isValidRadio(form.radio2, 'texto2......')){
if(isValidRadio(form.radio3, 'texto3......')){
return true;
}
}
return false;
}

David · #7 (**permalink**) 28/08/2008, 16:03

Coloca el código de isValidRadio como lo tienes ahora para ver dónde está el error.

JordiSolanas · #8 (**permalink**) 28/08/2008, 16:07

JordiSolanas · #9 (**permalink**) 28/08/2008, 16:08

Perdona, me he precipiatdo en la respuesta anterior. Aqui lo tienes:
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;

}

David · #10 (**permalink**) 29/08/2008, 10:29

Pues así como está debería funcionar, ¿puedes poner un enlace a tu página?

JordiSolanas · #11 (**permalink**) 29/08/2008, 15:14

Quiza el problema es que a la primera vez ya pone la función en true y luego las otras comprovaciones ya están también en true...
No sé si el script debería volver a false para que los otros radios pudieran hacer la comprobación, pero no sé como hacerlo.

David · #12 (**permalink**) 29/08/2008, 15:24

No, eso no tiene nada que ver, la función está correcta, devuelve true si uno de los checkbox está seleccionado y false si ninguno está seleccionado.

¿Qué es lo que no funciona exactamente? ¿Muestra el mismo alert para todos o cómo es?

P.S.: El return false de la función validateForm debes sacar del primer if

.

JordiSolanas · #13 (**permalink**) 29/08/2008, 15:51

Lo que me hace es que el primer grupo de radios sino se selecciona ninguno lo detecta y lanza el Alert correspondiente, però los otros dos grupos de radios puedo dejarlos sin seleccionar y me permite enviar el formulario sin ningún alert...

Ya he probado lo que me decias de sacar el primer if de la función, però el problema persiste.

David · #14 (**permalink**) 29/08/2008, 15:58

Deberías colocar un enlace a tu página o el código HTML del formulario para saber qué está pasando. Porque al código en sí por el momento no le veo error.

El único error que te dije es el return false que estaba dentro del primer if. Debería ser:

Código PHP:

  function validateForm(form) {
     if(isValidRadio(form.radio1, 'texto1......')){
            if(isValidRadio(form.radio2, 'texto2......')){
                if(isValidRadio(form.radio3, 'texto3......')){
                         return true;
                  }
             }
      }
return false;
}

JordiSolanas · #15 (**permalink**) 30/08/2008, 04:04

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>
<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>

<br class="clear" />
<div id="peu"></div>
</div>
</body>
</html>

Gracias por tu ayuda