Обязательный атрибут HTML5 - PullRequest
Новая
       0

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

79 голосов
/ 09 июня 2010

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

В основном я использую 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>

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

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

Ответы [ 7 ]

254 голосов
/ 10 июня 2010

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

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

48 голосов
/ 14 июня 2010

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

19 голосов
/ 09 июня 2010

Если я правильно понимаю ваш вопрос, вас смущает тот факт, что атрибут required имеет поведение по умолчанию в Safari?Если это так, см .: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required не является пользовательским атрибутом в HTML 5. Он определен в спецификации и используется точно так же, как вы используете его в настоящее время.1007 * РЕДАКТИРОВАТЬ : Ну, не точно .Как указал ms2ger, атрибут required является логическим атрибутом , и вот что спецификация HTML 5 говорит о них:

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

См .: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

8 голосов
/ 29 июля 2014

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

SASS / LESS: 

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

    &.invalid {
        border-color: red !important;
    }
}
7 голосов
/ 17 ноября 2010

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

3 голосов
/ 09 июня 2010

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

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

2 голосов
/ 01 июля 2015

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

Нет похожих вопросов

...