必須属性HTML5

81

Webアプリケーション内で、フォームフィールドにカスタム検証を使用しています。同じフォーム内に2つのボタンがあります。1つは実際にフォームを送信するためのもので、もう1つはフォームをキャンセル/リセットするためのものです。

ほとんどの場合、デフォルトのブラウザとしてSafariを使用しています。Safari 5がリリースされ、突然キャンセル/リセットボタンが機能しなくなりました。リセットボタンを押すたびに、フォームの最初のフィールドにフォーカスが移りました。ただし、これは私のカスタムフォーム検証と同じ動作です。別のブラウザで試してみると、すべてうまくいきました。私はSafari5の問題でなければなりませんでした。

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" />と<inputtype = "text" id = "name" required />は同じです

— RSK

確かに、私がXHTMLでのコーディングに慣れていたとき、それは私の悪い習慣です...しかし、最近のすべてのブラウザーは= "required"なしでこのタグをサポートしていますか？私は... Safariはないと信じている

— ロイック・カラ

実際の予想される動作は何ですか？

— CiroSantilli郝海东冠事病六四事件法轮功2016年

blog.grayghostvisuals.com/html/using-html-required-attributeによると、「属性が存在する場合、その値は空の文字列か、属性の正規名と大文字と小文字を区別しない一致である必要があります。先頭または末尾の空白。」「ブール」属性の場合、required = "true"の代わりにrequired = "required"または単にrequiredにする必要があります

— George Birbilis 2018年

49

Safari 5でこの問題が発生し、Opera 10でしばらく問題が発生しましたが、修正に時間を費やすことはありませんでした。今、私はそれを修正してあなたの投稿を見たが、フォームをキャンセルする方法についてはまだ解決策がない。多くの検索の後、私はついに何かを見つけました：

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Safari5とOpera10で動作します。

— ダリック・スパッド
ソース

8

novalidateフォームタグで使用して、フォーム全体に対してこれを行うこともできます。

— Michael Mior 2011年

この属性を現在のタブのすべてのフォームに追加する小さなChrome拡張機能をパッケージ化しました。ヒントをありがとう！chrome.google.com/webstore/detail/html5-form-validation-rem/…–

— ダミアン

私の場合は重要でした。formnovalidateボタンタイプの送信でも機能します<button type="submit" formnovalidate>Submit</button>。

— Mayeenul Islam 2018

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 2012

これは安全に使用できますか？...つまり、これを使用する必要がありますか、それともJavaScriptの検証に固執する必要がありますか？安全とは、

— つまり

8

元のコードが「間違っている」わけではないことを指摘したいと思いますfalse。これは、フィールドをオプション（必須ではない）にするために使用できることを意味しますが、そうではありません。理解しなければならないのは、required属性の存在によってフィールドが必須になるということです。フィールドをオプションにする唯一の方法は、属性を削除することです。そして、サーバー側の検証は本当に重要なことです（悲鳴を上げて申し訳ありません）。

— Ryan Wheale 2013

@RyanWhealeクライアント側の検証（それ自体では不十分ですが）も本当に重要だと思います

— jinglesthula 2013

1

@ jinglesthula-クライアント側の検証は、ユーザーにとって便利なだけです（サーバーへのラウンドトリップを節約し、UXを向上させます）。以前のコメント「[ブラウザ間で]これは安全に使用できますか」について説明しました。答えは、サーバー側の検証が機能している限り、実際には問題ではないということです（たとえば、古いブラウザはHTML5フォームを認識しません）。検証を行い、null値の「必須」フィールドを送信します）。

— Ryan Wheale 2013

19

私があなたの質問を正しく理解している場合、あなたをrequired混乱させているのは、属性がSafariでデフォルトの動作をしているように見えるという事実ですか？その場合は、http：//w3c.github.io/html/sec-forms.html#the-required-attributeを参照してください。

required HTML 5のカスタム属性ではありません。仕様で定義されており、現在使用している方法とまったく同じように使用されます。

編集：まあ、正確ではありません。ms2gerが指摘しているように、このrequired属性はブール属性であり、HTML5仕様ではこれらについて次のように述べています。

注：値「true」および「false」は、ブール属性では許可されていません。誤った値を表すには、属性を完全に省略する必要があります。

参照：http：//w3c.github.io/html/infrastructure.html#sec-boolean-attributes

— デイヴィッド・フォスター
ソース

2

そのため、標準オブジェクトでカスタム属性やプロパティを作成するべきではありません。

— クエンティン2010年

特定のページのChromeとSafariでこれをオフにする方法はありますか？

— Restuta 2010年

@Restutaはabout：flagsに移動して、Chromeでこれを無効にします。Firefox、よくわかりません。

— therealklanni 2011年

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 / LESS：

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

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

— Evalds Urtans
ソース

ありがとうございました。これは私を大いに助けました。

— theGreenCabbage 2015年

それはプレーンなCSS以下ですか？

— James A Mohler 2015年

私はiPodtouchを持っていますが、必要とマークされた入力が機能せず、このQ＆Aが見つかった場合でも、起動します。この答えは私のために働いた唯一のものでした。私はそれを共有したいと思った。

— ファンクフォーティナイナー2016

7

カスタム属性の小さなノート：彼らは、粒子が付いている限りとしてHTML5には、カスタム属性のすべての種類を可能にするdata-、すなわちdata-my-attribute="true"。

— ラダー
ソース

1

また、これらは古いブラウザで正常に機能するため（新しいAPIではなく、値にアクセスするために独自のコードが必要になる場合を除く）、独自の属性を作成するよりも優れた選択肢です（他のブラウザと衝突しないため）。将来追加される公式属性）。

— ポールD.ウェイト2011

1

実際、カスタム属性は文字通り何でもかまいません。「data-」で始まるものはelement.datasetオブジェクトに表示されますが、他の利点もあります（たとえば、jQueryは、.data()メソッドを使用して「data-」で始まるカスタム属性の値を自動的に取得できます。つまり、.data("myAttribute")= value of data-my-attribute）。短いカスタム属性を使用すると、カスタムCSS3セレクターを作成するのに役立つ場合があります。

— therealklanni 2011年

3

はい。質問を書き留めているのと同時に、同僚の1人が、これが実際にはHTML5の動作であることを認識しました。http://dev.w3.org/html5/spec/Overview.html#the-required-attributeを参照してください

HTML5には、「必須」という新しい属性があるようです。また、Safari5にはすでにこの属性の実装があります。

— ジョープ
ソース

くそー、あなたは私が同じ答えを投稿してから数秒以内にあなた自身の質問に答えました！

— デビッドフォスター

本当に私の同僚の一人に感謝します。これは私が思う他の人にとって興味深いかもしれませんか？

— Joop 2010年

間違いなく！最終的な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>

— 感情
ソース