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

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



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


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



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

551   8  

8 ответов:

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

47  
2010-06-14 22:46:37

отметим, что 

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

248  
2010-06-10 11:59:03

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

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

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

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

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

19  
2018-06-25 16:55:09

браузер 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;
    }
}
8  
2015-03-17 20:42:57

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

7  
2010-11-17 15:09:51

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

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

3  
2010-06-09 12:57:07

просто поместите следующее ниже вашей формы. Убедитесь, что ваши поля ввода 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>
2  
2015-07-01 23:10:00

вы пробовали использовать обязательный атрибут 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>
-3  
2013-04-03 09:53:15

Comments

    Ничего не найдено.
Click here to cancel reply.