W mojej aplikacji internetowej używam niestandardowej weryfikacji dla moich pól formularza. W tym samym formularzu mam dwa przyciski: jeden do faktycznego wysłania formularza, a drugi do anulowania / resetowania formularza.
Przeważnie używam Safari jako domyślnej przeglądarki. Teraz Safari 5 jest wyłączone i nagle mój przycisk anulowania / resetowania przestał działać. Za każdym razem, gdy naciskałem przycisk resetowania, pierwsze pole w moim formularzu było aktywne. Jest to jednak to samo zachowanie, co w przypadku walidacji mojego formularza niestandardowego. Podczas próby z inną przeglądarką wszystko działało dobrze. Musiałem mieć problem z Safari 5.
Zmieniłem nieco kod JavaScript i okazało się, że problem powoduje następujący wiersz:
document.getElementById("somefield").required = true;
Aby mieć pewność, że to naprawdę będzie problem, stworzyłem scenariusz testowy:
<!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>
Stało się to, czego się spodziewałem. Pierwsze pole „name” zostało automatycznie wyróżnione.
Ktoś jeszcze się w to natknął?
Odpowiedzi:
Właśnie natknąłem się na ten problem w Safari 5 i był to problem z Operą 10 od jakiegoś czasu, ale nigdy nie spędziłem czasu, aby go naprawić. Teraz muszę to naprawić i zobaczyłem Twój post, ale nie ma jeszcze rozwiązania, jak anulować formularz. Po długich poszukiwaniach w końcu coś znalazłem:
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">Działa na Safari 5 i Opera 10.
źródło
novalidatena tagu formularza, aby zrobić to dla całego formularza.formnovalidatedziała z przycisku typu submit też:<button type="submit" formnovalidate>Submit</button>.Zwróć na to uwagę
<input type="text" id="car" required="true" />jest źle, powinien być jednym z
<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' />Dzieje się tak, ponieważ
truewartość sugeruje, żefalsewartość spowoduje, że formant formularza będzie opcjonalny, co nie ma miejsca.źródło
falsew celu uczynienia pola opcjonalnym (niewymaganym) - co nie jest prawdą. Musisz zrozumieć, że obecnośćrequiredatrybutu sprawia, że pole jest wymagane. Jedynym sposobem, aby pole było opcjonalne, jest usunięcie atrybutu. A WALIDACJA PO STRONIE SERWERA NAPRAWDĘ MA ZNACZENIE (przepraszam za krzyki).Jeśli dobrze rozumiem Twoje pytanie, czy to, że
requiredatrybut wydaje się mieć domyślne zachowanie w Safari, jest dla Ciebie wprawieniem w zakłopotanie? Jeśli tak, zobacz: http://w3c.github.io/html/sec-forms.html#the-required-attributerequirednie jest atrybutem niestandardowym w HTML 5. Jest zdefiniowany w specyfikacji i jest używany dokładnie w taki sposób, w jaki go obecnie używasz.EDYCJA : Cóż, nie dokładnie . Jak zauważył ms2ger,
requiredatrybut jest atrybutem logicznym , a oto, co ma do powiedzenia specyfikacja HTML 5:Zobacz: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
źródło
Safari 7.0.5 nadal nie obsługuje powiadomień o sprawdzaniu poprawności pól wejściowych.
Aby przezwyciężyć, można napisać skrypt awaryjny w następujący sposób: http://codepen.io/ashblue/pen/KyvmA
Aby zobaczyć, jakie funkcje HTML5 / CSS3 są obsługiwane przez przeglądarki, sprawdź: 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 / MNIEJ:
input, select, textarea { @include appearance(none); border-radius: 0px; &.invalid { border-color: red !important; } }źródło
Mała uwaga na temat atrybutów niestandardowych: HTML5 dopuszcza wszystkie rodzaje atrybutów niestandardowych, o ile są poprzedzone przedrostkiem particle
data-, tjdata-my-attribute="true".źródło
element.datasetobiekcie, podobnie jak inne zalety (na przykład jQuery będzie w stanie automatycznie pobrać wartość dowolnego atrybutu niestandardowego z prefiksem „data-” przy użyciu.data()metody, tj..data("myAttribute")= Wartośćdata-my-attribute). Używanie krótszych atrybutów niestandardowych może być czasami przydatne do tworzenia niestandardowych selektorów CSS3.W porządku. W tym samym czasie, gdy zapisywałem swoje pytanie, jeden z moich kolegów uświadomił mi, że tak naprawdę jest to zachowanie HTML5. Zobacz http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
Wygląda na to, że w HTML5 jest nowy atrybut „wymagany”. Safari 5 ma już implementację tego atrybutu.
źródło
Po prostu umieść poniższe pod formularzem. Upewnij się, że pola wejściowe są
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>źródło