Maxlength en Textbox Multiline. Limitar la cantidad de caracteres, validar y simular Maxlength

Cuando uno se adentra al mundo web directamente de mundo SmartClient (VB6, winforms) sin pasar antes por conocimiento de HTML, programar en ASP.NET no sea del todo razonable y lógico como diría Sr. Spock. Me preguntaba un amigo (y también en los grupos de noticias de asp.net) como validar un texbox multilinea con la propiedad Maxlength, más precisamente era un pedido de auxilio porque "no funcionaba"!

Vamos a un poco de logica difusa jee!, veamos un poco de renderizado en HTML de nuestros queridos controles Texbox SingleLine y Multiline

<asp:TextBox ID="txtSingleLine" runat="server" MaxLength="10"></asp:TextBox>
<asp:TextBox ID="txtMultiline" runat="server" MaxLength="10" TextMode="MultiLine"></asp:TextBox>
 
Se renderizan…
<input name="ctl00$txtSingleLine" type="text" value="" maxlength="10" id="ctl00_txtSingleLine" /> 
<textarea name="ctl00$txtMultiline" rows="2" cols="20" id="ctl00_txtMultiline"></textarea>
 
Aquí vemos dos cotroles HTML uno es un input del tipo text y el otro un textarea.

A propósito coloque de antemano la propiedad Maxlength del webcontrol Textbox pero solo lo renderiza en el control HTML correcto que es el en input

Aqui es el navegador quien utiliza esta propiedad/atributo del control para no permitir mas contenido que el especificado. Pero en cambio en el textarea no lo tenemos.. entonces que hacemos?

 

Como simular Maxlength en Texbox Multiline

Hasta ahora vemos que en el cliente tenemos un control HTML texarea, pero como restringir que el usuario solo pueda ingresar una cantidad de caracteres predefinidos o incluso validar este ingreso, vemos una serie de opciones que nos pueden ayudar

  1. Con Regular Expression Validator
  2. Con Custom Validator
    1. desde el servidor (con funcion en codebehind)
    2. en el cliente (con funcion js)
  3. Con Script js (sin controles de validación)
  4. Simular la propiedad Maxlength en el texarea/textbox multiline

 

OPCION 1: Regular Expression Validator

Haciendo uso de los controles de validación podemos validar en el cliente mediante expresiones regulares (que ese lenguaje para describir patrones de texto que muchas veces uno cree que lo hizo un Vulcano)

Ejemplo sencillo:

<asp:RegularExpressionValidator ID="revTexbox3" runat="server"             
       ErrorMessage="Debe ingresar hasta un maximo de 10 caracteres"            
       ValidationExpression="^([Ss]{0,10})$"             
       ControlToValidate="TextBox3"            
       Display="Dynamic"></asp:RegularExpressionValidator>

Las expresiones regulares son muy potentes pero se vuelven muy complejas… (solo el que la formulo a veces la entiende)

Por ejemplo si queremos solo numeros necesitariamos algo asi "^([d]{0,10})$"
Algunos Enlaces:
 

OPCION 2: Custom Validator

Aquí podemos utilizar tanto con código del lado del servidor como en el cliente (javascript)

2.1: Validar en el servidor, es decir en el postback se validará

<asp:CustomValidator ID="cvTexbox4" runat="server"             
      ErrorMessage="Debe ingresar hasta un maximo de 10 caracteres"            
      ControlToValidate="txtEjemplo4"></asp:CustomValidator>

 
y en el codebehind… un ejemplo simple
Protected Sub cvTexbox4_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles cvTexbox4.ServerValidate
        Dim cantidadCaracteres As Integer = args.Value.Length
        If cantidadCaracteres > 10 Then
            args.IsValid = False
        Else
            args.IsValid = True
        End If
    End Sub

2.1: Validar en el cliente, seteando la propiedad ClientValidationFunction con la función js

Tenemos la definición del customvalidator

<asp:CustomValidator ID="CustomValidator1" runat="server" 
            ErrorMessage="Debe ingresar hasta un maximo de 10 caracteres"
            ClientValidationFunction="ValidarTextoCantidad"
            ControlToValidate="txtEjemplo5"></asp:CustomValidator>

 
La funcion js seria similar a esto
<script language="javascript" type="text/javascript">
    function ValidarTextoCantidad(source, arguments){
      var maxlength = 10;
      if (arguments.Value.length==maxlength) {
         arguments.IsValid=true
      }else{
         arguments.IsValid=false
      }
    }
</script>

 
 
 

OPCION 3: Mediante script JS (son controles de validación de ASP.NET)

Aquí tenemos un textbox multiline para agregarle eventos de JS y disparar una función

<asp:TextBox ID="txtEjemplo6" runat="server" 
            Height="88px" TextMode="MultiLine" Width="269px"></asp:TextBox>

 
Luego la funcion js, simple y dejo al criterio de cada uno agregar las acciones mas personalizadas, aqui solo presentamos un "molesto mensaje" y tambien "cortamos" el exceso de caracteres. Muy dictador
 
<script language="javascript" type="text/javascript">
    function ValidarCaracteres(textareaControl,maxlength){
             
        if (textareaControl.value.length > maxlength){
            textareaControl.value = textareaControl.value.substring(0,maxlength);
            alert("Debe ingresar hasta un maximo de "+maxlength+" caracteres");
        }
    }
</script>

Y como asociamos este js en los ventos onKeypress y onKeyUp ?

txtEjemplo6.Attributes.Add("onkeypress", " ValidarCaracteres(this, 10);")
txtEjemplo6.Attributes.Add("onkeyup", " ValidarCaracteres(this, 10);")

Logrando así que se dispare la función ValidarCaracteres cuando la necesitamos

 

OPCION 4: Simuladores…

Escribir realmente la propiedad Maxlength :)  "simular la propiedad maxlength"

Este script me gusto por la idea, pero bueno no es del todo "valido" el HTML que hay que generar… pero esta bueno, veamos como funciona

(lo encontre aquí: http://www.quirksmode.org/dom/maxlength.html)

Necesitamos agregar al html control renderizado la propiedad que "no viene de fabrica" ;), que es maxlength, quedando así en el cliente:

<textarea id="text" name="text" maxlength="10"></textarea>

 
Como hacemos para agregar esta propiedad? Bien como en el paso 3 agregamos propiedades/atributos para generar eventos en js aqui lo mismo.
Teniendo un textbox en diseño simple:
 
<asp:TextBox ID="txtEjemplo7" runat="server" 
            Height="88px" TextMode="MultiLine" Width="269px"></asp:TextBox>

Agregamos el atributo que necesitamos
 
txtEjemplo7.Attributes.Add("maxlength", "10")

Hasta ahora se renderiza con un atributo que "no es legal" pero nos puede servir gracias a este script ingenioso
<script language="javascript" type="text/javascript">
function setMaxLength() {
    var x = document.getElementsByTagName('textarea');
    var counter = document.createElement('div');
    counter.className = 'counter';
    for (var i=0;i<x.length;i++) {
        if (x[i].getAttribute('maxlength')) {
            var counterClone = counter.cloneNode(true);
            counterClone.relatedElement = x[i];
            counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
            x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
            x[i].relatedElement = counterClone.getElementsByTagName('span')[0];

            x[i].onkeyup = x[i].onchange = checkMaxLength;
            x[i].onkeyup();
        }
    }
}

function checkMaxLength() {
    var maxLength = this.getAttribute('maxlength');
    var currentLength = this.value.length;
    if (currentLength > maxLength)
        this.relatedElement.className = 'toomuch';
    else
        this.relatedElement.className = '';
    this.relatedElement.firstChild.nodeValue = currentLength;
    // not innerHTML
}
</script>

Ok.. pero donde lo llamo? y como?
Hay que agregarlo en el load de la pagina, es decir en el evento onload del body HTML
Y en ASP.NET como hago para generar este evento?
Primeramente tienes que convertir el tag body en  un html control de asp.net… esto es simplemente agregar la propiedad runat="server" y también un identificador para poder accesarlo desde el codebehind
Vamos a nuesta pagina o al master y agregamos:
 
<body runat="server" id="body1">

 
Y desde la pagina donde necesitamos que este script se ejecute
 
Dim body1 As HtmlControl = Me.Master.FindControl("body1")
body1.Attributes.Add("onload", "setMaxLength();")

Y listo.. tenemos algo asi
image
Además nos agrega luego del textarea unas etiquetas para que el usuario visualice la cantidad de caracteres permitidos y los ingresados.

 

Descargar ejemplo

(si no puedes ver el enlace click aquí para descargar)

Espero que te sirva de ayuda o guía.

 

 

Enlaces:

32 comentarios sobre “Maxlength en Textbox Multiline. Limitar la cantidad de caracteres, validar y simular Maxlength”

  3. 🙂 Muchas Gracias Gabo…
    Ya esta solucionado, solo que al modificar desde el sitio de administracion se me eliminaron los estilos que colorea el codigo.. 🙁 luego vere como solucionar.

    Responder

  4. hola amigo esta bueno el tuto, pero me quedo una duda y es que la vdd no tengo idea de como esta el codigo en VB# tienes idea de como poderlo usar en C#
    ———————————-
    Dim body1 As HtmlControl = Me.Master.FindControl(«body1»)

    body1.Attributes.Add(«onload», «setMaxLength();»)
    ———————————-
    gracias! 🙂

    Responder

  5. Hola Jimmy
    para conversion de VB.NET TO C# solo pon ese texto en google y encontraras algunos conversores..

    HtmlControl body1 = this.Master.FindControl(«body1»);
    body1.Attributes.Add («onload», «setMaxLength();»);

    Responder

  7. Solo un detalle, si le doy (ctrl+v) y pego en el textbox una palabra con mayor número de caracteres de los permitidos no manda mensaje de alerta (probado en la opcion 3) si permite ingresar mas caracteres de los permitidos. Como podría evitar eso??

    Responder

  8. Hola Michelle, gracias por el comentario
    Estaba probando con la opcion 3, y me funciona con la copia del teclado (Ctrl+V), ya que captura con el evento
    «onkeypress», «onkeyup» (tanto en IE como en FF)
    en que navegador estas testeando??
    Pero no valida los caracteres al pegar con el mouse (boton derecho Pegar)
    Entonces puedes agregar un evento «onBlur» que es cuando deja el foco el control, es decir
    txtEjemplo6.Attributes.Add(«onblur», » ValidarCaracteres(this, 10);»)

    NOTA: Tenemos en IE eventos onPaste, onBeforePaste pero todavia no estan disponibles en FF2 (recien lo estaran en FF3.0)

    Espero que te sirva

    Responder

  9. Buenos dias ante todo muy interesante las opciones que dan para la solución del problema con el textarea he estado utilizando el de simulación de maxlength siguiendo todos los pasos y ubicando el javascript dentro del tag head de mi masterpage,volviendo el tag del body en control asp y haciendo el llamado de este en mi pagina donde tengo el text multiline al que le agrege el atributo txtDescripcion.Attributes.Add(«MaxLength», «256») y llame al javascript desde el page load de mi pagina asi como lo explicaron
    Dim body1 As HtmlControl = Master.FindControl(«body1»)
    body1.Attributes.Add(«onload», «setMaxLength();») pero no me funciona si me pueden ayudar se lo agradeceria mucho ya que es urgente aqui en el trabajo, que Dios lo bendiga y gracias por su atención

    Responder

  10. para añadir otra pista me sale este error cuando estoy en depuracion la vetana de watch me sale este error {InnerText = Exception of type: ‘{System.Web.HttpException}’ occurred.}con respecto al tag body1

    Responder

  11. Hola Aramary
    (no dejaste un email para contestarte)
    Asi por lo que comentas parece ser que no asignaste un ID al tag body

    Entonces recien alli podras recuperarlo y manipularlo desde el codebehind

    Responder

  12. Gracias por su ayuda pero en tag body de mi master le puse runat=»server» id=»body1″ pero aun sigue enviando el mismo error.Gracias por su atencion.

    Responder

  13. Hola Aramary
    Acabo de enviarte un proyecto de ejemplo que luego lo posteare por aqui.
    El proyecto tiene el mismo codigo que puedes leer en el articulo.

    Responder

  14. Buenas Tardes
    Gracias por su ayuda pero en el tag del body del master page lo verifique y si tiene el id=»body1″ y runat=»server» como lo explico arriba pero aun asi me sigue enviando el error exactamente cuando estoy debugiando en el load del master page, que me sugiere hacer para solucionarlo, de antemano muchas gracias por su atención y aqui está mi correo al que me puede enviar su ayuda ciscotwins@gmail.com

    Responder

  18. Estube intentando colocar tu opcion 4 pero tengo algun error pq no me muestra nada de contar.
    He puesto la creacion de la nueva propiedad en el load asi como la llamada al master (poniendo su body y toda la jarana) pero no me sale nada de nada.

    El java script esta en mi master y eso era todo pero no me sale.

    a ver si me das una mano o me mandas un ejm.
    Saludos y gracias de antemano.

    adrian_jab@hotmail.com

    Responder

  19. Hola Jorge
    Te envie un proyecto de ejemplo para que mires como esta implementado. Luego te pediría que comentes nuevamente en el articulo te sirvió o no

    Mas tarde actualizo este articulo para descargar el DEMO que te envio 🙂

    Responder

  22. hola
    realice todos los pasos para la simulacion, pero TENGO UN ERROR

    nota: no estoy utilizando master page asi que el codigo lo coloco en el load de la pagina donde necesito ejecutar el Maxlenght

    estoy trabjando con c# asi que tuve que modificar la declaracion

    HtmlControl body1;
    body1= (HtmlControl)this.Page.FindControl(«body1»);
    body1.Attributes.Add(«onload», «setmaxlength();»);

    y me esta marcando el siguiente error

    Line 50:

    por fis ayudenme con este error y disculpen mi ignorancia

    mi correo es fjchmoron@hotmail.com

    Responder

  23. El ejemplo mostrado valida pero no detiene el ingreso, diferente a la propiedad maxLength del input type=»text», la implementacion que yo uso detiene el ingreso de caracteres una vez se llega al maxLength definido por el usuario asi:

    En tu archivo JS o en los tags de script:

    function isMaxLength(ctrl, len)
    {
    if (ctrl.value.length < len) return true; return false; } Y registras la funcion para tu control asi: TextBox.Attributes.Add("onkeypress", "return isMaxLength(this,10);") Tambien funciona con el ctrl+v: TextBox.Attributes.Add("onpaste", "return isMaxLength(this,10);") Y listo, funcionalidad equivalente a la de la propiedad maxLength.

    Responder

  24. Hola AndresCor
    No se de cual opciones estas hablando, pero creo que es la 4 la que no «detiene el ingreso» como tu dices.. estaba a modo de ejmplo de como colocar la propiedad
    Pero si te fijas puedes realizar lo que dices en la funcion checkMaxLength (de la opcion 4) donde tienes:
    if (currentLength > maxLength)
    this.relatedElement.className = ‘toomuch’;
    else
    this.relatedElement.className = »;

    Alli es un buen momento para DETENER el ingreso y no solo cambiar la clase CSS, como lo estoy haciendo yo 🙂
    El ejemplo que envias es compatible con las opciones 2.1 y la opcion3.
    Solo queria mostrar como «emular esta propiedad»
    GRACIAS por compartir el codigo. Saludos

    Responder

  25. Soy demasiado principiante, y en mi empresa me encargaron un pendiente de alguien que se fue.
    Necesito lo que vos explicas pero yo tengo las paginas en asp.
    Puedo aplicar alguna de estas soluciones o es distinto?
    Perdón por mi ignorancia y muchas gracias.

    Responder

  26. Hola @gon_trek

    Si estas con ASP Clasico (es asi no? por eso me dices ASP «solo»?) no vas poder utilizar los controles de ASP.NET como Regular Expression Validator (opcion 1) o Custom Validator (opcion 2)

    Pero en cambio las opciones 3 y 4 son validas ya que son para que en el cliente (en el navegador) puedes filtrar la entrada de X cantidad de caracteres. Pero DEBERAS (con mayusculas) validar en el servidor o sea verifica que cuando regresa el contenido al servidor mira la longitud de ese texto (ya que todo lo que es script del lado del cliente se puede manipular)

    Te invito a que postees en los grupos de noticias de ASP clasico (y tambien en los grupos de noticias de ASP.NET)

    – Newsgroup/Grupos de noticias de ASP.NET
    microsoft.public.es.dotnet.aspnet (esto es un newsgroup)
    Si no quieres entrar por la web de microsoft de los grupos de noticias, o por el outlook express… puede ingresar por aqui
    http://groups.google.com.ar/group/microsoft.public.es.dotnet.aspnet
    O leer los newsgroup por la interfaz web de microsoft
    http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.es.dotnet.aspnet
    – O en los foros de MSDN
    http://social.msdn.microsoft.com/Forums/es-ES/netfxwebes/threads

    para ASP Clasico: http://groups.google.com/group/microsoft.public.es.asp

    Espero que te sirva de ayuda o guia

    Responder

  27. Super tu artículo. Yo utilicé la primera opción (ya que no quería invertir tiempo y código con las otras opciones) y me funcionó perfecto. De todas las páginas que visité la tuya fué la más explícita, funcional y completa. Gracias.

    Responder

  29. Estoy utilizando CustomValidator en unos formularios.
    El problema es que no me funcionan en IE6, las validaciones se hacen en el cliente y son para longitud de textos,
    en las versiones posteriores de IE6 si funcionan de maravilla.

    Responder

  30. Hola @LigiaMaria
    Es un gran problema para los que desarrollamos que algunos script de javascript no funcionen en IE6.
    Cual estas utilizando en IE6? puedes enviarme el script?

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *