1

Cómo puedo hacer para setear el valor mínimo y máximo de un textbox segun lo que seleccione de un dropdownlist? Supongamos que tengo un dropdownlist con 3 items. Si eligo el primer item, el textbox debera tener minimo 3 letras y un máximo de 6. Si eligo el segundo item, el textbox debera tener minimo 4 letras y un máximo de 8. Estaba pensando si hay forma factible de hacerlo todo por client side usando el evento onChange en el dropdownlist y un rangevalidator para el textbox. La idea sería que en el evento onChange valide que item seleccionó y que setee el min y max del rangevalidator. Cómo podría implementar esto?

<asp:TextBox ID="TextBox" MaxLength="10" runat="server"></asp:TextBox>
<asp:DropDownList ID="DropDownList" runat="server"></asp:DropDownList>

En el codigo llene el dropdownlist con un datatable (datos del bd) y le agregue el atributo al dropdownlist de onchange y al textbox de onkey

DropDownList.Attributes.Add("OnChange", "cambiartextboxlength();")
TextBox.Attributes.Add("OnKeyup", "verificarvaloringresado();")

Funciones javascript

function cambiartextboxlength()
{
    var textbox=document.getElementById('<%=TextBox.ClientID%>');
    var ddl=document.getElementById('<%=DropDownList.ClientID%>');
    var

    if (ddl.selectedIndex == 0)
    {
        textbox.maxLength=*sacarvalordelappsettings*;
    }else if (ddl.selectedIndex == 1){
        textbox.maxLength=*sacarvalordelappsettings*;
    }else if (ddl.selectedIndex == 2) {
        textbox.maxLength=*sacarvalordelappsettings*;
    }
    }
function verificarvaloringresado()
{
var textbox=document.getElementById('<%=TextBox.ClientID%>');
if (textbox.value.length != textbox.maxlength) {
alert('El valor ingresado no es correcto!');
}
}
2
  • Cuéntanos qué has hecho hasta ahora. Commented el 27 abr. 2018 a las 5:53
  • Hola Roberto, actualice el post con lo que hice.
    – Popplar
    Commented el 27 abr. 2018 a las 6:03

1 respuesta 1

2

Añadimos a la lista el EventListener change para ejecutar una función cuando el usuario selecciona un elemento del listado.

Esa función obtiene el valor que el usuario ha seleccionado. Como realmente son 2 valores separados por coma, usamos split para crear un Array con esos 2 valores.

Finalmente añadimos los correspondientes atributos al input con los valores del Array.

let input = document.getElementsByTagName('input')[0];

function modifyInputLength() {

  let values = this.value.split(',');
	
  input.setAttribute('minlength', values[0]);
  input.setAttribute('maxlength', values[1]);

}

document.getElementsByTagName('select')[0].addEventListener('change', modifyInputLength);
<select>
  <option value=",">Select Length</option>
  <option value="4,8">Min: 4, Max: 8</option>
  <option value="8,10">Min: 8, Max: 10</option>
</select>

<input type="text">

2
  • Gracias, me es bastante útil. El único inconveniente es que el value de esos items los necesito porque guardo esos valores a la base de datos cuando hago postback al grabar. Una pregunta aparte, qué evento sería el mas recomendable para validar que si en ese input no haya un valor correcto largue una alerta?
    – Popplar
    Commented el 27 abr. 2018 a las 19:02
  • Para validar el valor de un input no hace falta ningún Evento. HTML tiene diversos validadores: w3schools.com/tags/tag_input.asp También puedes usar el validador pattern y personalizar el comportamiento con una expresión regular. La alerta la genera el propio navegador.
    – Angel Luis
    Commented el 27 abr. 2018 a las 19:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.