Обязательный атрибут Не работает в браузере Safari
Я пробовал следующий код для того, чтобы обязательное поле уведомило нужное поле, но не работало в браузере Safari.
Код:
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
Над кодом работает firefox. http://jsfiddle.net/X8UXQ/179/
Можете ли вы сообщить мне код javascript или любой рабочий стол? Я новичок в javascript
Спасибо
Ответы
Ответ 1
Safari не поддерживает этот атрибут, вам нужно использовать JavaScript. Эта страница содержит хакерское решение, которое должно добавить желаемую функциональность:
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
HTML:
<form action="" method="POST" id="formID">
Your name: <input required = "true"/>
<br />
<input type="submit" />
</form>
JavaScript:
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
alert('Please, fill the form'); // error message
}
}, false);
Вы можете заменить предупреждение каким-то менее уродливым предупреждением, например показать DIV с сообщением об ошибке:
document.getElementById('errorMessageDiv').style.display = 'block';
и в HTML:
<div id="errorMessageDiv" style="display:block;">Please, fill the form.</div>
(содержимое атрибута style должно быть в файле CSS)
Единственным недостатком этого подхода является то, что он не обрабатывает точный ввод, который необходимо заполнить. Для этого потребуется петля на всех входах в форме и проверка значения (и лучше, проверьте наличие "обязательного" атрибута).
Ответ 2
Если вы перейдете с jQuery, то код ниже намного лучше. Просто поместите этот код внизу файла jquery.min.js и он будет работать для каждой формы.
Просто поместите этот код в свой обычный .js файл и вставьте его после этого файла jquery.js или jquery.min.js
$("form").submit(function(e) {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
e.preventDefault();
return false;
}
}); return true;
});
Этот код работает с тем браузером, который не поддерживает требуемый атрибут (html5)
Иметь друзей друзей в формате кодирования.
Ответ 3
У меня была такая же проблема с Safari, и я могу только просить вас всех взглянуть на Webshim!
Я нашел решения для этого вопроса и для этого один очень полезен, но если вы хотите "имитировать" собственную проверку ввода HTML5 для Safari, Webshim сохраняет вы много времени.
Webshim предоставляет некоторые "обновления" для Safari и помогает ему обрабатывать такие вещи, как датпикер HMTL5 или подтверждение формы. Это не просто реализовать, но и выглядит достаточно хорошо, чтобы сразу использовать его.
Также полезный ответ на SO для начальной настройки для webshim здесь! Копия связанного сообщения:
В настоящее время Safari не поддерживает "требуемый" входной атрибут. http://caniuse.com/#search=required
Чтобы использовать атрибут 'required' в Safari, вы можете использовать 'webshim'
1 - Загрузить webshim
2 - Поместите этот код:
<head>
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
</head>
Ответ 4
Я нашел замечательную запись в блоге с решением этой проблемы. Он решает его таким образом, что мне более комфортно и дает лучший пользовательский интерфейс, чем другие предложения здесь. Он изменит цвет фона полей, чтобы обозначить, является ли вход действительным или нет.
CSS
/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
background: #BE4C54;
}
.invalid textarea:required:invalid {
background: #BE4C54;
}
.invalid select:required:invalid {
background: #BE4C54;
}
/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
background: #17D654 ;
}
.invalid textarea:required:valid {
background: #17D654 ;
}
.invalid select:required:valid {
background: #17D654 ;
}
JS:
$(function () {
if (hasHtml5Validation()) {
$('.validate-form').submit(function (e) {
if (!this.checkValidity()) {
// Prevent default stops form from firing
e.preventDefault();
$(this).addClass('invalid');
$('#status').html('invalid');
}
else {
$(this).removeClass('invalid');
$('#status').html('submitted');
}
});
}
});
function hasHtml5Validation () {
return typeof document.createElement('input').checkValidity === 'function';
}
Кредит: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
(Примечание: я расширил CSS из сообщения, чтобы покрыть textarea и выбрать поля)
Ответ 5
Я построил решение поверх @Roni одного.
Кажется, что Webshim обесценивает, поскольку он не будет совместим с jquery 3.0.
Важно понимать, что Safari проверяет требуемый атрибут. Разница в том, что он делает с этим. Вместо того, чтобы блокировать представление и отображать подсказку с сообщением об ошибке рядом с входом, он просто позволяет продолжить поток формы.
При этом checkValidity() реализуется в Safari и возвращает false, если требуемая подача не выполняется.
Итак, чтобы "исправить", а также отобразить сообщение об ошибке с минимальным вмешательством (без дополнительного Div для хранения сообщений об ошибках) и никакой дополнительной библиотеки (кроме jQuery, но я уверен, что это можно сделать на простом javascript)., Я получил этот маленький взлом с помощью заполнителя, чтобы отображать стандартные сообщения об ошибках.
$("form").submit(function(e) {
if (!e.target.checkValidity()) {
console.log("I am Safari"); // Safari continues with form regardless of checkValidity being false
e.preventDefault(); // dismiss the default functionality
$('#yourFormId :input:visible[required="required"]').each(function () {
if (!this.validity.valid) {
$(this).focus();
$(this).attr("placeholder", this.validationMessage).addClass('placeholderError');
$(this).val(''); // clear value so it shows error message on Placeholder.
return false;
}
});
return; // its invalid, don't continue with submission
}
e.preventDefault(); // have to add it again as Chrome, Firefox will never see above
}
Ответ 6
Я использую это решение и прекрасно работаю
$('#idForm').click(function(e) {
e.preventDefault();
var sendModalForm = true;
$('[required]').each(function() {
if ($(this).val() == '') {
sendModalForm = false;
alert("Required field should not be blank."); // or $('.error-message').show();
}
});
if (sendModalForm) {
$('#idForm').submit();
}
});
Ответ 7
Вы можете добавить этот обработчик событий в свою форму:
// Chrome and Firefox will not submit invalid forms
// so this code is for other browsers only (e.g. Safari).
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
var inputFields = form.querySelectorAll('input');
for (i=0; i < inputFields.length; i++) {
if (!inputFields[i].validity.valid) {
inputFields[i].focus(); // set cursor to first invalid input field
return false;
}
}
}
}, false);
Ответ 8
Внутри каждой функции() я нашел все элементы DOM текстового ввода в старой версии ПК Safari, я думаю, что этот код полезен для более новых версий на MAC с использованием объекта itemobj ['prpertyname'] для получения всех свойств и значений:
$('form').find("[required]").each(function(index, inputobj) {
if (inputobj['required'] == true) { // check all required fields within the form
currentValue = $(this).val();
if (currentValue.length == 0) {
// $.each((inputobj), function(input, obj) { alert(input + ' - ' + obj); }); // uncomment this row to alert names and values of DOM object
var currentName = inputobj['placeholder']; // use for alerts
return false // here is an empty input
}
}
});
Ответ 9
Новый Safari 10.1, выпущенный 26 марта 2017 года, теперь поддерживает атрибут "required".
http://caniuse.com/#search=required
