all - Atributo requerido HTML5
title html css (8)
Dentro de mi aplicación web estoy usando alguna validación personalizada para mis campos de formulario. Dentro de la misma forma, tengo dos botones: uno para enviar el formulario y el otro para cancelar / restablecer el formulario.
Sobre todo uso Safari como mi navegador predeterminado. Ahora Safari 5 está apagado y de repente mi botón cancelar / reiniciar no funcionó más. Cada vez que presioné el botón de reinicio, el primer campo de mi formulario obtuvo el foco. Sin embargo, este es el mismo comportamiento que la validación de mi formulario personalizado. Al probarlo con otro navegador, todo funcionó bien. Tenía que ser un problema de Safari 5.
Cambié un poco en mi código Javascript y descubrí que la siguiente línea estaba causando el problema:
document.getElementById("somefield").required = true;
Para estar seguro de que ese sería realmente el problema, creé un escenario de prueba:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form id="someform">
<label>Name:</label> <input type="text" id="name" required="true" /><br/>
<label>Car:</label> <input type="text" id="car" required="true" /><br/>
<br/>
<input type="submit" id="btnsubmit" value="Submit!" />
</form>
</body>
</html>
Lo que esperaba que sucediera sucedió. El primer campo "nombre" obtuvo el foco automáticamente.
¿Alguien más tropezó con esto?
¿Ha intentado utilizar el atributo requerido de HTML5 ( http://www.w3.org/TR/html5/forms.html#the-required-attribute )?
<body>
<form id="someform">
<label>Name:</label> <input type="text" id="name" required /><br/>
<label>Car:</label> <input type="text" id="car" required /><br/>
<br/>
<input type="submit" id="btnsubmit" value="Submit!" />
</form>
</body>
</html>
Acabo de toparme con este problema con Safari 5 y ha sido un problema con Opera 10 durante un tiempo, pero nunca dediqué tiempo a solucionarlo. Ahora necesito arreglarlo y ver su publicación, pero todavía no hay una solución sobre cómo cancelar el formulario. Después de mucho buscar finalmente encontré algo:
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">
Funciona en Safari 5 y Opera 10.
Bueno. Al mismo tiempo que escribía mi pregunta, uno de mis colegas me hizo consciente de que en realidad es un comportamiento HTML5. Ver http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
Parece en HTML5 que hay un nuevo atributo "requerido". Y Safari 5 ya tiene una implementación para este atributo.
Safari 7.0.5 aún no es compatible con la notificación para la validación de los campos de entrada.
Para superarlo, es posible escribir el script de respaldo de esta manera: http://codepen.io/ashblue/pen/KyvmA
Para ver qué funciones de HTML5 / CSS3 son compatibles con los navegadores, consulte: http://caniuse.com/form-validation
function hasHtml5Validation () {
//Check if validation supported && not safari
return (typeof document.createElement(''input'').checkValidity === ''function'') &&
!(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}
$(''form'').submit(function(){
if(!hasHtml5Validation())
{
var isValid = true;
var $inputs = $(this).find(''[required]'');
$inputs.each(function(){
var $input = $(this);
$input.removeClass(''invalid'');
if(!$.trim($input.val()).length)
{
isValid = false;
$input.addClass(''invalid'');
}
});
if(!isValid)
{
return false;
}
}
});
SASS / MENOS:
input, select, textarea {
@include appearance(none);
border-radius: 0px;
&.invalid {
border-color: red !important;
}
}
Si entiendo tu pregunta correctamente, ¿es el hecho de que el atributo required parece tener un comportamiento predeterminado en Safari que te confunde? Si es así, ver: http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
required no es un atributo personalizado en HTML 5. Está definido en la especificación, y se usa exactamente de la manera en que lo está usando actualmente.
EDITAR : Bueno, no precisamente . Como ms2ger ha señalado, el atributo required es un atributo booleano , y esto es lo que tiene que decir la especificación HTML 5 sobre ellos:
Nota: Los valores "verdadero" y "falso" no están permitidos en los atributos booleanos. Para representar un valor falso, el atributo debe omitirse por completo.
Ver: http://dev.w3.org/html5/spec/Overview.html#boolean-attribute
Simplemente ponga lo siguiente debajo de su formulario. Asegúrese de que sus campos de entrada sean required .
<script>
var forms = document.getElementsByTagName(''form'');
for (var i = 0; i < forms.length; i++) {
forms[i].noValidate = true;
forms[i].addEventListener(''submit'', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert("Please complete all fields and accept the terms.");
}
}, false);
}
</script>
Tenga en cuenta que
<input type="text" id="car" required="true" />
está mal, debería ser uno de
<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='''' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required=''required'' />
Esto se debe a que el valor true sugiere que el valor false hará que el control de formulario sea opcional, lo que no es el caso.
Una pequeña nota sobre los atributos personalizados: HTML5 permite todo tipo de atributos personalizados, siempre que estén prefijados con los data- las partículas, es decir, data-my-attribute="true" .