setcustomvalidity - llamar archivo javascript desde html
¿Hay navegadores compatibles con el método checkValidity() de HTML5? (6)
La especificación de HTML5 define algunos componentes de validación muy interesantes, incluido el patrón (para validar contra un Regexp) y el requerido (para marcar un campo según sea necesario ). Sin embargo, lo mejor que puedo decir es que ningún navegador realmente realiza ninguna validación basada en estos atributos.
Encontré una comparación del soporte de HTML5 entre los motores , pero no hay información sobre la validación allí. En los navegadores que he probado (Firefox 3.5.8 y Safari 4.0.4), ningún objeto tiene un método checkValidity() , así que no puedo ejecutar las validaciones aunque puedo definirlas.
¿Hay algún soporte para esta característica por ahí para que pueda experimentar?
Opera 10 tiene alguna validación de formulario HTML5 http://dev.opera.com/articles/view/improve-your-forms-using-html5/ . Pero, no creo que tenga checkValidation ().
Probé lo siguiente en Google Chrome:
<!DOCTYPE html>
<html>
<body>
<style>
.valid { color: #0d0; }
.invalid { color: #d00; }
</style>
<div id="output"></div>
<script>
function check(input) {
var out = document.getElementById(''output'');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class=''valid''>" + input.id +
" is valid</span>";
} else {
out.innerHTML = "<span class=''invalid''>" + input.id +
" is not valid</span>";
}
}
console.log(input.checkValidity());
};
</script>
<form id="testform" onsubmit="return false;">
<label>Required:
<input oninput="check(this)" id="required_input"
required />
</label><br>
<label>Pattern ([0-9][A-Z]{3}):
<input oninput="check(this)" id="pattern_input"
pattern="[0-9][A-Z]{3}"/>
</label><br>
<label>Min (4):
<input oninput="check(this)" id="min_input"
type=number min=4 />
</label><br>
</form>
</body>
</html>
Stangely, la propiedad <element>.validity.valid parece funcionar correctamente, pero llamar a <element>.checkValidity() siempre devuelve verdadero, por lo que parece que aún no está implementado.
Por supuesto. Opera y Chromium. Pero puedes ponerte a prueba a ti mismo:
function supportsValidity(){
var i = document.createElement(''input'');
return typeof i.validity === ''object''
}
Aquí hay un enlace a un sandbox donde puedes ver Opera y Chrome en acción: http://jsfiddle.net/vaZDn/light/
Según Dive in HTML5 :
Cuando un usuario de Opera intenta enviar un formulario con un campo, Opera automáticamente ofrece validación de correo electrónico compatible con RFC, incluso si el scripting está deshabilitado. Opera también ofrece validación de direcciones web ingresadas en campos y números en campos. La validación de números incluso tiene en cuenta los atributos mínimo y máximo, por lo que Opera no le permitirá enviar el formulario si ingresa un número que es demasiado grande.
(El párrafo citado es el último del artículo).
Hasta donde yo sé, y teniendo en cuenta que no he probado con Opera 10, estoy tomando su palabra, ningún otro navegador valida formularios automáticamente.
Si se refiere a checkValidity () entonces, sí, Opera lo admite.
Disclosurey thang: trabajo para Opera.
checkValidity () se supone que funciona en el formulario como un todo o en una entrada individual.
"Además, el método checkValidity () se puede ejecutar en un campo individual o en el formulario como un todo, y devuelve verdadero o falso. Ejecutar el método también activará programáticamente el evento no válido para todos los campos no válidos o, si se ejecuta en un campo único, solo para ese elemento ".tomado de un List Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/
"form. checkValidity () Devuelve true si los controles del formulario son todos válidos; de lo contrario, devuelve false." http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation"valid = element. checkValidity () Devuelve true si el valor del elemento no tiene problemas de validez; en caso contrario, genera un evento no válido en el elemento en este último caso". http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation
W3C - borrador de trabajo.