質問: ### 前提・実現したいこと 入力フォームのバリデータを作っているところです。 すでに表示したエラー要素があるかないかを判別して、なければ表示、あったら表示しないということをやりたいです。 ### 発生している問題・エラーメッセージ ``` に対して空欄にしてfocusを外すと意図通り、テキストボックスの上に 必須項目です と表示されます。 しかし、その後何回もfocusをあてて、外してを繰り返すと何行も 必須項目です が追加されてしまいます。 ``` ### 該当のソースコード ``` $(":text.validate,textarea.validate").on('blur', function() { $(this).filter(".required").each(function(){ if($(this).val()==""){ if( !$(this).parent('p.error').length ) { $(this).parent().prepend("必須項目です"); } }else{ $(this).parent('p.error').remove(); } }); }); ``` ### 試したこと parentをparentsやclosestで試しましたが一緒でした。 よろしくお願いいたします。
回答: ### 原因 `.length`できちんと`p.error`の存在を判定している意図が見て取れますね。 なのになぜできないのか? 問題は`.parent()`です。これは親要素を指定するメソッドです。 しかし挿入先は`.parent().prepend()`なので兄要素になっているはず。 ### 解決策 なので兄要素を指定する`.prev()`メソッドを使ってあげれば解決すると思います。 ``` $(":text.validate,textarea.validate").on('blur', function() { $(this).filter(".required").each(function(){ if($(this).val()==""){ // if( !$(this).parent('p.error').length ) { if( !$(this).prev('p.error').length ) { // .prev() で兄要素を指定してあげる $(this).parent().prepend("必須項目です"); } }else{ $(this).parent('p.error').remove(); } }); }); ```