Обов’язковий атрибут 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

— Джооп
джерело

2

Тепер немає необхідності встановлювати необхідний атрибут на true. Наприклад: <input type = "text" id = "name" required = "true" /> і <input type = "text" id = "name" required /> однакові

— RSK

Правда, це погана звичка від моєї, коли мене звикли кодувати в XHTML ... Але чи всі сучасні браузери підтримують цей тег без = "required"? Я вважаю, що Safari не ...

— Loic Cara

Яка фактична та очікувана поведінка?

— Ciro Santilli 郝海东冠状病六四事件法轮功

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

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

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

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

— Дамієн

Важливим було для мого випадку, formnovalidateпрацює з кнопкового типу уявити також: <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? я маю на увазі безпеку, чи робить це рішення аномалії на різних браузерах / пристроях ...

— kebyang

8

Я хотів би зазначити, що оригінальний код не є "неправильним", він просто означає, що ви можете використовувати його falseдля того, щоб зробити поле необов'язковим (не обов'язково) - що не так. Треба розуміти, що наявність requiredатрибута робить поле обов’язковим. Єдиний спосіб зробити поле необов’язковим - це видалити атрибут. І СЕРВЕРНА БІЧНА ВАЛІДАЦІЯ - ВСЕ, ЩО ДЕЙСТВИТЕЛЬНО МАЄ (вибачте за крик).

— Ryan Wheale

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

— jinglesthula

1

@jinglesthula - перевірка на стороні клієнта - це не що інше, як зручність для користувача (збереження зворотних поїздок на сервер, що призводить до кращого використання). Я звертався до попереднього коментаря "чи безпечно це використовувати [у всіх браузерах]" - і відповідь полягає в тому, що це насправді не має значення, поки працює перевірка на стороні сервера (наприклад, старіший браузер не розпізнає форму HTML5 перевірку та подасть "обов'язкове" поле з нульовим значенням).

— Ryan Wheale

19

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

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

EDIT : Ну, не точно . Як зазначив ms2ger, requiredатрибут є логічним атрибутом , і ось що має сказати специфікація HTML 5 про них:

Примітка: Значення "true" і "false" не допускаються для логічних атрибутів. Для подання хибного значення атрибут потрібно взагалі пропустити.

Див .: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

— Девід Фостер
джерело

2

І саме тому ми не повинні створювати власні атрибути або властивості для стандартних об’єктів.

— Квентін

Будь-які ідеї, як вимкнути це для Chrome та Safari для певної сторінки?

— Рестута,

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

SASS / менше:

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

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

— Евальдс Уртанс
джерело

Дякую. Це мені дуже допомогло.

— theGreenCabbage

Це звичайний CSS чи менше?

— James A Mohler,

У мене є iPod touch, який протягом мого життя все ще спрацьовує, коли входи, позначені як необхідні, не працювали, і знайшов ці запитання. Ця відповідь була єдиною, яка спрацювала для мене. Просто думав, що поділюсь цим.

— Funk Forty Niner

7

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

— Люддер
джерело

1

І вони чудово працюють у старих браузерах (за винятком того, що для доступу до їх значень вам знадобиться власний код, а не новий API), тому вони є кращим вибором, ніж створення власних атрибутів (оскільки вони не будуть конфліктувати з будь-якими офіційні атрибути, додані в майбутньому).

— Пол Д. Уейт,

1

Насправді, спеціальні атрибути можуть бути буквально будь-якими. element.datasetОднак ті, що мають префікс "data-", з'являться в об'єкті, а також інші переваги (наприклад, jQuery автоматично зможе захопити значення будь-якого префіксного атрибута "data-" за допомогою .data()методу, тобто .data("myAttribute")= значенняdata-my-attribute ). Використання коротших спеціальних атрибутів іноді може бути корисним для створення власних селекторів CSS3.

— therealklanni

3

Добре. Одночасно з тим, як я писав своє запитання, один із моїх колег зрозумів, що це насправді поведінка HTML5. Див. Http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

Здається, в HTML5 є новий атрибут "обов'язковий". І Safari 5 вже має реалізацію для цього атрибута.

— Джооп
джерело

Блін, ти відповів на власне запитання за лічені секунди після моєї публікації тієї самої відповіді!

— Девід Фостер,

Дійсно завдяки одному з моїх колег. Це може бути цікаво для інших, я гадаю?

— Джоп

Безумовно! Я в захваті від того, що бачу, що може запропонувати остаточна специфікація 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>

— емоційність
джерело