###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を動かしています
回答2件
あなたの回答
tips
プレビュー