22

HTML 5では、入力にとしてマークを付けてから、CSSの疑似セレクターをrequired使用して入力を選択できます。[required]ただし、必要な要素を入力せずにフォームを送信しようとした場合にのみ、スタイルを設定したいと思います。このためのセレクターはありますか？ポップアップする小さなメッセージボックスはどうですか？

4

7 に答える 7

29

：validおよび：invalidセレクターを使用できます。このようなもの

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

ただし、これはネイティブ検証をサポートするブラウザーでのみ機能し、意味のあるフィールドでのみ機能します。私の知る限り、今のところそれはChromeを意味するだけです（おそらくSafariですが、チェックしていません）。

つまり、ネイティブ検証とは、Chromeでは<input type="email">、フィールドの値が電子メールタイプの文字列（追加のJavaScriptなし）で検証されるため、上記のスタイルが機能することを意味します。ただし、フィールドまたは2番目のパスワードフィールド（最初のフィールドと一致すると想定される）にそれらを添付する場合type="text"、すべてが有効であるため、緑色になります。パスワードの場合、「タイプ」はありません。 「とにかくそのために。

これは基本的に、すべてのブラウザーをサポートすることを意味し、さらに重要なことに、より幅広い検証をjavascriptに頼る必要があります。その場合、.valid/.invalidクラスの割り当ては問題になりません。:)

于 2011-03-10T15:48:06.537 に答える
13

私はJavaScriptを使用して送信時にフォームにクラスを適用し、そのクラスを使用してフィールドの.validatedスタイルを設定しました。例：:invalid

.validated input:invalid {
  ...
}

このように、フォームが送信された後でのみ、フィールドがページの読み込み時に無効として表示されることはありません。

理想的には、送信時にフォームに疑似クラスが適用されます。

于 2011-04-13T22:32:35.647 に答える
4

ええ、SLaksが言ったように、これを行うためのCSSセレクターはありません。CSSは入力の内容をチェックする必要があるため、これがCSSの範囲に含まれることはないと思います。

それでも、実際にフォームを送信するのではなく、ボタンをクリックしたときにjavascript検証関数を呼び出すのが最善のオプションです。次に、[必須]フィールドで適切なコンテンツを確認し、フォームを送信するか、入力されていない必須フィールドを強調表示します。

JQueryには、これを処理する優れたプラグインがいくつかあります http://docs.jquery.com/Plugins/validation

于 2011-03-09T17:03:15.890 に答える
4

CSS Selectors 4:user-errorの作業ドラフトには、これを正確に実行する疑似クラスがあり、入力ブラーとフォーム送信の両方で起動します。

その間、私は個人的に：user-errorをカバーする素晴らしいwebshims polyfillライブラリを使用しています。または、Tobyの答えに沿った何かでそれを自分でハックすることもできます。

于 2013-09-25T19:31:17.330 に答える
2 
input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

クロムで試してテストしました。他のブラウザではテストしていません。

于 2014-01-06T19:09:20.803 に答える
1

このソリューションは、空白のときに属性を介して必要な入力フィールドのスタイルを設定します。キーダウン時に必須フィールドに入力すると、ブラウザは：invalid疑似クラスを削除します。Firefoxの最近のバージョンは、このスタイルに似たものを自動的に適用しますが、ChromeとIEは適用しません。

input[required]:invalid { box-shadow: 0 0 3px 1px red }

試してみてください：http：//jsfiddle.net/2Ph2X/

于 2014-06-11T21:21:47.087 に答える
0

非常に簡単です。要素にフォーカスがあるときにクラスを追加するだけで、送信中に正しくない要素にフォーカスが移り、クライアントが1つずつ入力して検証します。JavaScriptを使用しない場合の最善の解決策だと思います。

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}
于 2018-05-22T16:21:48.447 に答える