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

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

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

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

источник

2010-06-09 Joop

Теперь нет необходимости устанавливать атрибут true в значение true. Например: и то же самое –

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

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

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

источник

2010-06-14 19:46:37

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

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

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

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

источник

2010-06-09 09:57:07 Joop

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

Спасибо одному из моих коллег. Это может быть интересно для других, я полагаю? – Joop

Определенно! Я очень рад видеть, что конечная спецификация HTML5 должна будет предлагать на передней панели. –

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

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

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

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

См: http://dev.w3.org/html5/spec/Overview.html#boolean-attribute

источник

2010-06-09 09:58:06

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

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

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

241

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

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

источник

2010-06-10 08:59:03 Ms2ger

+1. Хорошо подмечено. Удивленный я пропустил это. –

Этот ответ верен, но я думаю, что это не проблема, которую мы имеем здесь. – PhoneixS

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

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

источник

2010-11-17 13:09:51 Ludder

И [отлично работают в старых браузерах] (http://stackoverflow.com/questions/2412947/do-html5 -custom-data-attributes-work-in-ie-6) (за исключением того, что вам нужен ваш собственный код для доступа к их значениям, а не новый API), поэтому они являются лучшим выбором, чем составление ваших собственных атрибутов (поскольку они не будут сталкиваться с любыми официальными атрибутами, добавленными в будущем). –

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

-3

Вы пробовали использовать обязательный атрибут 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>

источник

2013-04-03 06:53:15 DominicRoyDomingo

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

источник

2014-07-29 07:47:34

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

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

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

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

источник

2015-07-01 19:58:45 emotality

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

ответ

Смежные вопросы