Dentro de mi aplicación web, estoy usando una validación personalizada para mis campos de formulario. Dentro del mismo formulario tengo dos botones: uno para enviar el formulario y el otro para cancelar / restablecer el formulario.
Principalmente utilizo Safari como mi navegador predeterminado. Ahora Safari 5 está fuera y, de repente, mi botón cancelar / reiniciar ya no funcionaba. 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?
Respuestas:
Me acabo de encontrar con este problema con Safari 5 y ha sido un problema con Opera 10 durante algún tiempo, pero nunca dediqué tiempo a solucionarlo. Ahora necesito arreglarlo y vi su publicación, pero aún no tengo una solución sobre cómo cancelar el formulario. Después de mucha búsqueda 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.
fuente
novalidatela etiqueta del formulario para hacer esto para todo el formulario.formnovalidatelas obras con el tipo de botón también presentar:<button type="submit" formnovalidate>Submit</button>.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
truevalor sugiere que elfalsevalor hará que el control de formulario sea opcional, lo cual no es el caso.fuente
falsepara hacer que un campo sea opcional (no es obligatorio), lo cual no es el caso. Lo que debe comprender es que la presencia delrequiredatributo hace que el campo sea obligatorio. La única forma de hacer que el campo sea opcional es eliminar el atributo. Y LA VALIDACIÓN DEL LADO DEL SERVIDOR ES TODO LO QUE REALMENTE IMPORTA (perdón por gritar).Si entiendo correctamente su pregunta, ¿es el hecho de que el
requiredatributo parece tener un comportamiento predeterminado en Safari lo que lo confunde? Si es así, consulte: http://w3c.github.io/html/sec-forms.html#the-required-attributerequiredno es un atributo personalizado en HTML 5. Está definido en la especificación y se usa precisamente de la forma en que lo está usando actualmente.EDITAR : Bueno, no precisamente . Como ha señalado ms2ger, el
requiredatributo es un atributo booleano , y esto es lo que la especificación HTML 5 tiene que decir al respecto:Ver: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
fuente
Safari 7.0.5 aún no admite la notificación para la validación de los campos de entrada.
Para superarlo, es posible escribir un script alternativo como este: http://codepen.io/ashblue/pen/KyvmA
Para ver qué funciones 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; } }fuente
Una pequeña nota sobre los atributos personalizados: HTML5 permite todo tipo de atributos personalizados, siempre que tengan el prefijo de la partícula
data-, es decirdata-my-attribute="true".fuente
element.datasetobjeto, sin embargo, así como otras ventajas (por ejemplo, jQuery podrá tomar automáticamente el valor de cualquier atributo personalizado con prefijo "data-" usando el.data()método, es decir,.data("myAttribute")= valor dedata-my-attribute). El uso de atributos personalizados más cortos a veces puede ser útil para crear selectores CSS3 personalizados.Bueno. Al mismo tiempo que escribía mi pregunta, uno de mis colegas me hizo saber que en realidad se trata de un comportamiento HTML5. Ver http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
Parece que en HTML5 hay un nuevo atributo "obligatorio". Y Safari 5 ya tiene una implementación para este atributo.
fuente
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>fuente