Quiero limitar el número de caracteres que haya en un textarea. Ahora bien, no me vale usar el atributo de HTML maxlength="numero", tengo que hacerlo mediante javascript y que cuando acabes de escribir y salgas del textarea te informe, en caso de que te hayas excedido, de que has superado el número de caracteres, pero que te deje continuar rellenando el resto de input que tenga el formulario. Quiero validar el textarea. El formulario no podrá enviarse hasta que no este validado el textarea, que a su vez debe contener información y no puede estar en blanco.
Adjunto el código con el que estoy empezando:
HTML
<form id="formulario">
<fieldset>
<legend>Datos para enviar</legend>
<ul>
<li>
<label for="nombre">Introduce tu nombre:</label>
<input type="text" id="nombre" name="nombre" value="" placeholder="escribe tu nombre" required>
</li>
<li>
<label for="email">Introduce tu email</label>
<input type="email" id="email" name="email" value="" placeholder="escribe tu email" required>
</li>
<li>
<label for="message">Introduce el mensaje que desees:</label>
<textarea name="message" id="message" placeholder="Escribe tu mensaje" maxlength="50" required></textarea>
</li>
</ul>
<button id="inputsubmit" type="submit" class="formsubmit">Enviar</button>
<button id="inputreset" type="reset" class="formreset">Borrar datos</button>
</fieldset>
</form>
¿Qué código podría añadirle en javascript para esto?
He encontrado algo de código, pero no lo hago funcionar.
JavaScript
function myFunction() {
document.getElementById("message").maxLength = "100";
document.getElementById("demo").innerHTML = "Maximum number of characters allowed in the text area is now 100.";
}
Como he dicho me gustaría que el mensaje se observara cuando sales del textarea, sin que sea un alert, que permita continuar rellenando otros input, pero que si intentas enviar el formulario, no lo haga y vuelva a salir el mensaje de error por superar el número máximo de caracteres.