Обязательный атрибут HTML5

81

В моем веб-приложении я использую некоторую настраиваемую проверку для полей формы. В той же форме у меня есть две кнопки: одна для фактической отправки формы, а другая для отмены / сброса формы.

В основном я использую 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>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

То, что я ожидал, произошло. Первое поле «имя» автоматически получило фокус.

Кто-нибудь еще сталкивался с этим?

html

— Joop
источник

2

Теперь нет необходимости устанавливать для обязательного атрибута значение true. Например: <input type = "text" id = "name" required = "true" /> и <input type = "text" id = "name" required /> одинаковы

— RSK

Правда, это моя дурная привычка, когда я привык писать код на XHTML ... Но все ли современные браузеры поддерживают этот тег без = "required"? Я считаю, что Safari не ...

— Лоик Кара,

Каково фактическое и ожидаемое поведение?

— Чиро Сантилли 郝海东冠状病六四事件法轮功

в соответствии с blog.grayghostvisuals.com/html/using-html-required-attribute "Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое не учитывает регистр символов канонического имени атрибута, без начальные или конечные пробелы ". для "логических" атрибутов, поэтому вместо required = "true" должно быть required = "required" или просто required

— Джордж Бирбилис

49

Я только что столкнулся с этой проблемой с 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.

— Дэррик Спауд
источник

8

Вы также можете использовать novalidateтег формы, чтобы сделать это для всей формы.

— Michael Mior 09

Я упаковал небольшое расширение Chrome, добавив этот атрибут ко всем формам на текущей вкладке, спасибо за совет! chrome.google.com/webstore/detail/html5-form-validation-rem/…

— Дэмиен,

Было важно для моего случая, formnovalidateработает и с кнопкой типа submit : <button type="submit" formnovalidate>Submit</button>.

— Mayeenul Islam

256

Обратите внимание, что

<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значение сделает элемент управления формой необязательным, а это не так.

— Ms2ger
источник

7

Этот ответ верен, но я думаю, что проблема не в этом.

— PhoneixS

это безопасно использовать? ... Я имею в виду, следует ли мне использовать это или просто придерживаться проверки javascript? под безопасным я имею в виду, вызывает ли это решение аномалии в другом браузере / устройстве ...

— Кебьянг,

8

Я хотел бы отметить, что исходный код не «неправильный», он просто подразумевает, что вы можете использовать его false, чтобы сделать поле необязательным (не обязательным), что не так. Вы должны понимать, что наличие requiredатрибута делает поле обязательным. Единственный способ сделать поле необязательным - удалить атрибут. И ВАЛИДАЦИЯ СЕРВЕРА - ЭТО ВСЕ, ЧТО ДЕЙСТВИТЕЛЬНО ВАЖНО (извините за крик).

— Ryan Wheale

@RyanWheale Я думаю, что проверка на стороне клиента (хотя сама по себе недостаточна) тоже имеет значение

— jinglesthula

1

@jinglesthula - проверка на стороне клиента - это не что иное, как удобство для пользователя (экономия двусторонних обращений к серверу, что приводит к лучшему UX). Я обращался к предыдущему комментарию «безопасно ли это использовать [в разных браузерах]» - и ответ заключается в том, что это не имеет большого значения, пока работает проверка на стороне сервера (например, старый браузер не распознает форму HTML5 проверка и отправит "обязательное" поле с нулевым значением).

— Райан Уил

19

Если я правильно понимаю ваш вопрос 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

— Дэвид Фостер
источник

2

Вот почему мы не должны создавать настраиваемые атрибуты или свойства для стандартных объектов.

— Квентин

Есть идеи, как отключить это для Chrome и Safari для конкретной страницы?

— Restuta

@Restuta перейдите к about: flags, чтобы отключить это в Chrome. Firefox, я не уверен.

— therealklanni

8

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;
    }
}

— Эвалдс Уртанс
источник

Спасибо. Это мне очень помогло.

— theGreenCabbage

Это простой CSS или меньше?

— Джеймс А. Молер

У меня есть iPod touch, который, хоть убей, все еще срабатывает, когда входы, помеченные как необходимые, не работают, и я нашел этот вопрос и ответ. Этот ответ был единственным, который у меня сработал. Просто подумал, что поделюсь этим.

— Funk Forty Niner

7

Небольшое примечание о пользовательских атрибутах: HTML5 позволяет все виды пользовательских атрибутов, до тех пор , как они начинаются с частицей data-, то есть data-my-attribute="true".

— Ludder
источник

1

И они отлично работают в старых браузерах (за исключением того, что вам понадобится ваш собственный код для доступа к их значениям, а не новый API), поэтому они лучше, чем создание ваших собственных атрибутов (поскольку они не будут конфликтовать с какими-либо официальные атрибуты добавлены в будущем).

— Пол Д. Уэйт

1

На самом деле настраиваемые атрибуты могут быть буквально любыми. Однако в element.datasetобъекте появятся атрибуты с префиксом «data-» , а также другие преимущества (например, jQuery автоматически сможет получить значение любого настраиваемого атрибута с префиксом «data-», используя .data()метод, т.е. .data("myAttribute")= value of data-my-attribute). Использование более коротких настраиваемых атрибутов иногда может быть полезно для создания настраиваемых селекторов CSS3.

— therealklanni

3

Хорошо. В то же время, когда я писал свой вопрос, один из моих коллег сообщил мне, что на самом деле это поведение HTML5. См. Http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

Кажется, в HTML5 появился новый атрибут «обязательный». И в Safari 5 уже есть реализация для этого атрибута.

— Joop
источник

Черт, ты ответил на свой вопрос в течение нескольких секунд после того, как я отправил тот же ответ!

— Дэвид Фостер,

Действительно, спасибо одному из моих коллег. Думаю, это может быть интересно другим?

— Joop

Однозначно! Я как бы рад видеть, что окончательная спецификация HTML5 может предложить в отношении формы.

— Дэвид Фостер

2

Просто введите следующее ниже своей формы. Убедитесь, что у вас есть поля ввода 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>

— эмоциональность
источник