html5 - validacion - validar formulario php antes enviar
¿Hay un atributo de validación de longitud mínima en HTML5? (16)
Agregue un valor máximo y uno mínimo para que pueda especificar el rango de valores permitidos:
<input type="number" min="1" max="999" />
Parece que el atributo minlength para un campo <input> no funciona.
¿Hay algún otro atributo en HTML5 con cuya ayuda pueda establecer la longitud mínima de un valor para los campos?
Ahora hay una propiedad minlength en la especificación HTML5 , así como la interfaz validity.tooShort .
Ambos están ahora habilitados en las versiones recientes de todos los navegadores modernos. Para obtener más información, consulte https://caniuse.com/#search=minlength .
Consulte caniuse.com/#search=minlength , es posible que algunos navegadores no admitan este atributo.
Si el valor del "tipo" es uno de ellos:
texto, correo electrónico, búsqueda, contraseña, tel o url (advertencia: no incluye el número | no hay soporte para el navegador "tel" ahora - 2017.10)
use el atributo minlength (/ maxlength), especifica el número mínimo de caracteres.
p.ej.
<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">
o use el atributo "patrón":
<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">
Si el "tipo" es número , aunque no se admite la longitud mínima (/ maxlength), puede usar el atributo min (/ max) en su lugar.
p.ej.
<input type="number" min="100" max="999" placeholder="input a three-digit number">
El atributo minLength (a diferencia de maxLength) no existe de forma nativa en HTML5. Sin embargo, hay algunas formas de validar un campo si contiene menos de x caracteres.
Se proporciona un ejemplo utilizando jQuery en este enlace: http://docs.jquery.com/Plugins/Validation/Methods/minlength
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<label for="field">Required, Minimum length 3: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
En mi caso, en el que validé lo más minlength y minlength Firefox (43.0.4), minlength y validity.tooShort no están disponibles por desgracia.
Pero como solo necesito tener almacenadas las longitudes mínimas para proceder, una manera fácil y práctica es asignar este valor a otro atributo válido de la etiqueta de entrada. En ese caso, entonces, puede usar min , max y step de otras entradas de tipo no de texto correctamente (tipo = "número"), pero también entradas.
En lugar de almacenar esos límites en una matriz, es más fácil encontrarla almacenada en la misma entrada en lugar de hacer que la identificación del elemento coincida con el índice de la matriz.
Escribí este código JavaScript, [minlength.js]:
window.onload = function() {
function testaFunction(evt) {
var elementos = this.elements;
for (var j = 0; j < elementos.length; j++) {
if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
evt.preventDefault();
};
}
}
}
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].addEventListener(''submit'', testaFunction, true);
}
}
Mi solución para textarea utilizando jQuery y combinando HTML5 requiere validación para verificar la longitud mínima.
minlength.js
$(document).ready(function(){
$(''form textarea[minlength]'').on(''keyup'', function(){
e_len = $(this).val().trim().length
e_min_len = Number($(this).attr(''minlength''))
message = e_min_len <= e_len ? '''' : e_min_len + '' characters minimum''
this.setCustomValidity(message)
})
})
HTML
<form action="">
<textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
No HTML5, pero práctico de todos modos: si usas AngularJS , puedes usar ng-minlength para entradas y áreas de texto. Véase también este Plunk .
Noté que a veces en Chrome cuando el autocompletar está activado y los campos están marcados por el método de compilación automática del navegador, omite las reglas de validación de longitud mínima, por lo que en este caso tendrá que deshabilitar el autocompletar con el siguiente atributo:
autocompletar = "apagado"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
Nueva versión:
Extiende el uso (textarea y input) y corrige errores.
// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
function testFunction(evt) {
var items = this.elements;
for (var j = 0; j < items.length; j++) {
if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
items[j].focus();
evt.defaultPrevented;
return;
}
else {
items[j].setCustomValidity('''');
}
}
}
}
var isOpera = !!window.opera || navigator.userAgent.indexOf('' OPR/'') >= 0;
var isChrome = !!window.chrome && !isOpera;
if(!isChrome) {
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].addEventListener(''submit'', testFunction,true);
forms[i].addEventListener(''change'', testFunction,true);
}
}
}
Puede utilizar el atributo de pattern . El atributo required también es necesario, de lo contrario, un campo de entrada con un valor vacío se excluirá de la validación de restricciones .
<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">
Si desea crear la opción de usar el patrón para "longitud vacía o mínima", puede hacer lo siguiente:
<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}" required title="Either 0 OR (8 chars minimum)">
Sí, ahí está. Es como maxlength. Documentación de W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
En caso de que minlength no funcione, use el atributo de pattern como lo menciona @ Pumbaa80 para la etiqueta de input .
Para textarea: Para configurar max; use maxlength y para min vaya a este enlace .
Aquí encontrarás tanto para max como para min.
Si deseo hacer este comportamiento,
siempre muestra un pequeño prefijo en el campo de entrada o el usuario no puede borrar un prefijo :
//prefix="prefix_text"
//if the user change the prefix, restore the input with the prefix:
if(document.getElementById(''myInput'').value.substring(0,prefix.length).localeCompare(prefix))
document.getElementById(''myInput'').value = prefix;
Usé maxlength y minlength con o sin required y funcionó muy bien para HTML5.
<input id="passcode" type="password" minlength="8" maxlength="10">
`
Utilicé max y min luego se requiere y funcionó muy bien para mí, pero lo que no estoy seguro es si es un método de codificación. Espero que ayude
<input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required>
Aquí está la solución solo para HTML5 (si desea una validación de minlength 5, maxlength 10 caracteres)
http://jsfiddle.net/xhqsB/102/
<form>
<input pattern=".{5,10}">
<input type="submit" value="Check"></input>
</form>