|
Validar varios RadioButton
Publicado: 17/04/2008
Leído: 1583 veces
Lectura: 0 minutos
|
Categoría: AJAX y Javascript
Valoracion: 6,666667
|
|
Seguro que hay alguna forma de hacerlo más fácil, pero yo no la he encontrado... así que me puse manos a la obra y lo he hecho yo mismo... he de confesar que me gusta demasiado hacer las cosas por mí mismo, aunque ya esté hecho, simplemente por el hecho de aprender, por tener un control 100% de lo que sucede... y por haberlo hecho yo, jeje 
El caso es el siguiente: tenemos varios RadioButton diferentes, todos ellos pertenecientes al mismo GroupName, de modo que hacer click sobre uno de ellos implica que se desmarque el previamente elegido.
Por ejemplo eso lo tenemos en Todoexpertos.com, cuando un usuario finaliza y puntúa la pregunta al experto puede darle una puntuación de 0 a 5 y para eso usamos 6 RadioButton's, y no queremos hacerlo usando el RadioButtonList.
Hasta ahora marcábamos por defecto una puntuación de 3 sobre 5... pero decidimos obligar al usuario a elegir una puntuación. Para ello requeríamos verificar, al hacer click sobre un Button, que se hubiera elegido una de las opciones.
Lo primero que se viene a la cabeza es usar un RequiredFieldValidator, pero yo no encontré la forma de hacerlo para RadioButton's separados... así que me puse manos a la obra con un pequeño Javascript.
Os muestro el Javascript que lo utiliza, comentándolo sobre la marcha.
<script type="text/javascript">
// Valida que alguno de los elementos del mismo "groupname" haya sido elegido
function validateRadioButtonList(groupname, message)
{
// Recogemos todos los elementos "input" de nuestra página
var inputs = document.getElementsByTagName("input");
var hasItems = false;
// Recorremos cada uno de los elementos,
for (var i = 0; i < inputs.length; i++)
{
// y seleccionamos si hay alguno de tipo "radio"
if (inputs[i].type == 'radio')
{
// Verificamos que ese RadioButton pertenece al groupname especificado
var name = inputs[i].name;
var isFromGroup = (name.lastIndexOf(groupname) + groupname.length ) == name.length;
// En de encontrar un RadioButton con el groupname...
if (isFromGroup)
{
// Marcamos que lo hemos encontrado
hasItems = true;
// Si hay alguno checkeado, devolver true
if (inputs[i].checked)
{
return true;
}
}
}
}
if (hasItems)
{
// Si llegamos aquí es que hemos encontrado
// RadioButton's con el groupname, pero ninguno checkeado
if (!message) message = 'Debes elegir una opción';
alert(message);
return false;
}
else
{
// Si llegamos aquí es que no hemos encontrado
// ningún RadioButton con el groupname buscado
return true;
}
}
</script>
Eso en cuanto al javascript. Un ejemplo que lo use:
RadioButton.aspx
<div>
<div>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="SubgurimTest" Text="RadioButton1" />
</div>
<div>
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="SubgurimTest" Text="RadioButton2" />
</div>
<div>
<asp:RadioButton ID="RadioButton3" runat="server" GroupName="SubgurimTest" Text="RadioButton3" />
</div>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (!validateRadioButtonList('SubgurimTest')) return false;"
OnClick="Button1_Click" />
</div>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
RadioButton.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
string message = string.Empty;
if (RadioButton1.Checked)
message = "RadioButton1";
if (RadioButton2.Checked)
message = "RadioButton2";
if (RadioButton3.Checked)
message = "RadioButton3";
Label1.Text = message;
}
Vemos que tenemos tres RadioButton's cuyo GroupName es "SubgurimTest". Posteriormente tenemos un Button que maneja un evento OnClick cualquiera, y un OnClientClick así:
if (!validateRadioButtonList('SubgurimTest')) return false;
De forma que vemos claramente que si no se valida el Grupo de RadioButton's, no se debe seguir con el Post.
Espero que os sea de utilidad, incluso si sabéis una forma mucho más sencilla de hacerlo 
|
Ante cualquier duda o sugerencia sobre este artículo, coméntalo en el
foro de ASP.NET
de nuestra Web Amiga sobre
asp.net
|