質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

446閲覧

JSのIE対応について

dragon_taro

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/08/02 02:25

編集2017/08/02 03:33

###validation付きのformの要素数の取得について
chromeで開発していたwebサービスのIE11対応の開発をしているのですが、現バージョンでは

javascript

1$(':required :invalid').length

で取得していてIEでは対応していないとエラーを吐かれます。

###試したこと

javascript

1document.querySelectorAll( ":invalid" ) 2document.querySelectorAll( ":required" ) 3document.querySelectorAll( ":invalid:required" )

での取得を試みたのですが、こちらもエラーが吐かれます。
IE9以上対応と書いていたのですがこの擬似要素には対応していないのでしょうか。
###回答していただきたいこと
フロントはreactで開発されてはいるのですが、stateの設計上react側での処理は厳しそうです。(もちろんstateで管理できるに越したことはなっかたのですが、、、)ですので、生のjsでの処理かjqueryでの処理を教えていただけると幸いです。よろしくお願いします。最悪、validaition項目が全部埋められているかどうかの判定だけでも大丈夫です。


追記です

###当該のコード

javascript

1<Trow for='charitable_gifts' need_columns={need_columns}> 2 <th> 3 <h3>{getItemName(this.state.kind, 'charitable_gifts')}</h3> 4 <span className='p_required isTrue'>必須</span> 5 </th> 6 <td> 7 <CheckBoxList 8 name='charitable_gift_ids' 9 items={items.charitable_gifts} 10 checked_item_values={this.state.charitable_gift_ids} 11 onChangeValue={this.handleChangeValue} 12 required={true} 13 /> 14 </td> 15</Trow> 16... 17// checkboxlistは 18<label className={`${this.props.name}_${this.props.value}`}> 19 <input 20 className={this.props.className || ''} 21 id={this.props.id_name || '' 22 type='checkbox' 23 name={this.props.name} 24 value={this.props.value} 25 checked={this.state.checked} 26 disabled={this.props.disabled} 27 onChange={this.handleChange} 28 required={this.props.required || false} 29 /> 30 {this.props.label} 31</label> 32// というコンポーネントをmapでlist化したコンポーネントです。

このようなformが大量にありこのformでも先ほどのようなエラーが出ます。

javascript

1export class PostManager extends React.Component { 2 ... 3 componentWillReceiveProps(nextProps){ 4 ... 5 var count = $(':required :invalid').length; // ここでsyntaxエラー 6 // :requiredと:invalidの間のスペースがないとそもそもページが表示されない 7 ... 8 console.log(document.querySelectorAll( ":required" )); //上を消すとここでsyntaxエラー 9 console.log(document.querySelectorAll( ":invalid" )); 10 ... 11 } 12 13 render(){ 14 ... 15 } 16}

このコンポンーネントは記事作成の送信を担っていて、ここでvalidationの判定のために要素を取得しようとしています。まだ関数化はしていないのですが要はこのメソッドを使いたいのでエラーは同じかと思われます。

###開発環境
VirtualBoxでwin8.1のIE11を動かしています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/02 02:51

エラーがはかれたというソースコード(HTML含めて)をご提示ください。私のほうで簡単なフォームを作って試したところobjectが取れたので対応していないということはないと思います。
dragon_taro

2017/08/02 03:35

更新しました。説明が下手で申しわけないですがよろしくお願いいたします。
think49

2017/08/02 07:01

タイトルは質問内容を表すものにしてください。「JSのIE対応について」では「何に対応させたいのか」が具体化されていません。
guest

回答2

0

ベストアンサー

:invalid 疑似クラス

IE9以上対応と書いていたのですがこの擬似要素には対応していないのでしょうか。

MDNによれば、:invalid は IE10+ が対応しています。


(2017/08/02 16:05 追記)

説明不足で申し訳なかったのですが、IE11に対応させたくてコードを書いています。
cssプロパティが対応しているのは確認できたのですが、このコード内のjqueryでは:invalidが使えません。

:invalid 疑似クラスは Form validation の処理後に作用するものです。
既定動作では submit 時に validation される為、submit イベントハンドラで document.querySelectorAll(':invalid') を参照すれば、は期待通りに動作すると思います。
それ以外のタイミングで validation させたい場合は JavaScript で validation 処理を発動させる必要があります。

Form validation

IE9- は Form validation 系に対応していないので、IE9- においてはネイティブ機能で実装する方法はありません。
required属性、pattern属性などを自前で参照して互換コードを書く以外に手段はないと思われます。

Re: dragon_taro さん

投稿2017/08/02 06:19

編集2017/08/02 07:13
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dragon_taro

2017/08/02 06:30

説明不足で申し訳なかったのですが、IE11に対応させたくてコードを書いています。 cssプロパティが対応しているのは確認できたのですが、このコード内のjqueryでは:invalidが使えません。 その点に関して、なにか思い当たる節等ございますでしょうか?
think49

2017/08/02 07:06

親記事に追記しました。 細かい指摘ですが、:invalid は疑似要素ではなく、擬似クラスになります。
dragon_taro

2017/08/02 07:41

ありがとうございます
guest

0

汎用性はわかりませんが、とりあえず以下でチェックしてみてはいかがでしょうか?

console.log($(document).find('[required]').length)

投稿2017/08/02 03:23

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dragon_taro

2017/08/02 03:51

ありがとうございます。requiredについては取得できました! :invalidについてはどのように取得すれば良いか教えていただけないですか? ちなみにconsole.log($(document).find(':invalid').length)はエラーでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問