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

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

В основном я использую Safari в качестве браузера по умолчанию. Теперь Safari 5 отключен, и вдруг моя кнопка отмены / reset больше не работает. Каждый раз, когда я нажимал кнопку reset, первое поле в моей форме получало фокус. Однако это то же поведение, что и моя пользовательская проверка формы. При попытке использовать его в другом браузере все просто отлично работает. Я должен был быть проблемой 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>

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

Если я правильно понимаю ваш вопрос, является ли тот факт, что атрибут required, по-видимому, имеет поведение по умолчанию в Safari, что вас сбивает с толку? Если это так, см. http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

required не является настраиваемым атрибутом в HTML 5. Он определен в спецификации и используется точно так, как вы сейчас используете его.

EDIT: Ну, не совсем. Как указывал ms2ger, атрибут required является логическим атрибутом, и вот что скажет о них спецификация HTML 5:

Примечание. Значения "true" и "false" не допускаются к логическим атрибутам. Чтобы представить ложное значение, атрибут должен быть вообще опущен.

Смотрите: http://dev.w3.org/html5/spec/Overview.html#boolean-attribute

Ответ 4

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

Ответ 5

Safari 7.0.5 по-прежнему не поддерживает уведомление для проверки полей ввода.

Чтобы преодолеть это, можно написать резервную копию script следующим образом: 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;
        }
    }
});

SASS/LESS:

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

Ответ 6

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

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

Ответ 7

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

Ответ 8

Вы пытались использовать обязательный атрибут HTML5 (http://www.w3.org/TR/html5/forms.html#the-required-attribute)?

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>