jquery - jQuery:必要な選択要素を含む無効なHTML 5フォーム

jquery html validation

ブラウザがパターン属性$('select[required]').is(':invalid')をサポートし、Firefox 4〜7で正常に動作する場合はif(Modernizr.input.pattern) {}を使用していますが、ChromeとSafariの両方に問題があります。

他のすべての検証は正常に機能し、必要な選択メニュー、つまり<select required><option></option></select>

これが私のjsfiddleです:http://jsfiddle.net/mbCbt/。基本的に、ドロップダウンアイテムを選択し、それを検証するためのものです。

Firefoxでは、「テスト」を選択すると有効と表示されます。 「選択してください」を選択すると、無効と表示されます。

Safari / Chromeでは、「テスト」を選択すると無効と表示され、次に「選択してください」を選択すると有効になります。もう一度テストを選択すると無効になります。そこからtest2を選択すると有効になります。もう一度testを選択すると、今回は有効になります。

ブラウザがCSSから有効であることを認識しているので、jQueryだと思います...

考え? (jquery kbにはない)関数に対する公式のサポートは実際にはないことを理解していますが、別の方法があることを願っています。古いブラウザの検証チェックを低下させたので、Webkitの検証に戻ったほうがいいのではないですか?
答え
Safariのバグのように見えます。バリデーターは正しいですが、2回目は呼び出されます。 is( ':invalid')を呼び出すと、以前の検証が返されます。

私はあなたの例をフォークして(this.validity())を呼び出してみましたが、同じ結果を返します。 CSSのみが正確です!

これを簡単に取得する方法に困惑しています。DOMはCSSの値を返しません。 $(this).css( 'border')とthis.style.borderColorをチェックして、サイコロのない結果を取得しようとしました。

更新
検証が行われる前にchange()イベントが発生しています。警告を出す( 'ここ'); .is( ':invalid');の前は、要素が無効なCSS属性からまだ「赤」であることを示しています。

経過時間後に検証を試みると、
window.setTimeout(doValidateTest(this)、10)
またはそのような場合、それはおそらく正しく戻ります。
関連記事

jquery - jqueryドラッグ可能な非リストアイテムをソート可能なリストに

jquery - 戻るボタンをダブルクリックすると、サイトが2ページ戻ります

jquery - ラベルで編集可能ですが、クリックに焦点を当てないようにするにはどうすればよいですか?

php - jquery添付ファイル付きの電子メールを送信

javascript - jQueryを使用して<head>からすべての<meta ..>を読み取るにはどうすればよいですか?

javascript - ページコンテンツがAjaxで読み込まれた後にJavaScriptを読み込む

javascript - jquery編集可能テーブル:特定のセルを編集可能にするにはどうすればよいですか?

javascript - jqueryを使用して、入力テキストボックスに基づいて使用可能なオプションを変更および表示[削除/追加]

javascript - jqueryを使用して更新を表示する

jquery - JQueryをサイズ変更可能およびドラッグ可能にするには、Greasemonkeyを使用する方法を教えてください。