В моем веб-приложении я использую некоторую настраиваемую проверку для полей формы. В той же форме у меня есть две кнопки: одна для фактической отправки формы, а другая для отмены / сброса формы.
В основном я использую Safari как браузер по умолчанию. Теперь Safari 5 отсутствует, и внезапно моя кнопка отмены / сброса перестала работать. Каждый раз, когда я нажимал кнопку сброса, первое поле в моей форме получало фокус. Однако это то же поведение, что и моя проверка пользовательской формы. При попытке с другим браузером все работало нормально. У меня должна быть проблема с Safari 5.
Я немного изменил свой код Javascript и обнаружил, что следующая строка вызывает проблему:
document.getElementById("somefield").required = true;
Чтобы убедиться, что это действительно проблема, я создал тестовый сценарий:
<!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>
То, что я ожидал, произошло. Первое поле «имя» автоматически получило фокус.
Кто-нибудь еще сталкивался с этим?
Ответы:
Я только что столкнулся с этой проблемой с Safari 5, и это было проблемой с Opera 10 в течение некоторого времени, но я никогда не тратил время на ее исправление. Теперь мне нужно это исправить, и я увидел ваше сообщение, но пока нет решения, как отменить форму. После долгих поисков я наконец кое-что нашел:
http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate
<input type=submit formnovalidate name=cancel value="Cancel">Работает в Safari 5 и Opera 10.
источник
novalidateтег формы, чтобы сделать это для всей формы.formnovalidateработает и с кнопкой типа submit :<button type="submit" formnovalidate>Submit</button>.Обратите внимание, что
<input type="text" id="car" required="true" />неправильно, это должно быть одним из
<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' />Это потому, что
trueзначение предполагает, чтоfalseзначение сделает элемент управления формой необязательным, а это не так.источник
false, чтобы сделать поле необязательным (не обязательным), что не так. Вы должны понимать, что наличиеrequiredатрибута делает поле обязательным. Единственный способ сделать поле необязательным - удалить атрибут. И ВАЛИДАЦИЯ СЕРВЕРА - ЭТО ВСЕ, ЧТО ДЕЙСТВИТЕЛЬНО ВАЖНО (извините за крик).Если я правильно понимаю ваш вопрос
required, не смущает ли вас тот факт, что этот атрибут имеет поведение по умолчанию в Safari? Если да, см. Http://w3c.github.io/html/sec-forms.html#the-required-attribute.requiredне является настраиваемым атрибутом в HTML 5. Он определен в спецификации и используется именно так, как вы его сейчас используете.EDIT : Ну, не точно . Как указано в ms2ger,
requiredатрибут является логическим атрибутом , и вот что об этом говорится в спецификации HTML 5:См. Http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes
источник
Safari 7.0.5 по-прежнему не поддерживает уведомления для проверки полей ввода.
Чтобы преодолеть это, можно написать резервный сценарий следующим образом: http://codepen.io/ashblue/pen/KyvmA
Чтобы узнать, какие функции HTML5 / CSS3 поддерживаются браузерами, проверьте: 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; } } });САСС / МЕНЬШЕ:
input, select, textarea { @include appearance(none); border-radius: 0px; &.invalid { border-color: red !important; } }источник
Небольшое примечание о пользовательских атрибутах: HTML5 позволяет все виды пользовательских атрибутов, до тех пор , как они начинаются с частицей
data-, то естьdata-my-attribute="true".источник
element.datasetобъекте появятся атрибуты с префиксом «data-» , а также другие преимущества (например, jQuery автоматически сможет получить значение любого настраиваемого атрибута с префиксом «data-», используя.data()метод, т.е..data("myAttribute")= value ofdata-my-attribute). Использование более коротких настраиваемых атрибутов иногда может быть полезно для создания настраиваемых селекторов CSS3.Хорошо. В то же время, когда я писал свой вопрос, один из моих коллег сообщил мне, что на самом деле это поведение HTML5. См. Http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
Кажется, в HTML5 появился новый атрибут «обязательный». И в Safari 5 уже есть реализация для этого атрибута.
источник
Просто введите следующее ниже своей формы. Убедитесь, что у вас есть поля ввода
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>источник