追加した親要素が認識されない

前提・実現したいこと

入力フォームのバリデータを作っているところです。
すでに表示したエラー要素があるかないかを判別して、なければ表示、あったら表示しないということをやりたいです。

発生している問題・エラーメッセージ

<input type="text" name="name" class="validate required">
に対して空欄にしてfocusを外すと意図通り、テキストボックスの上に
<p class='error'>必須項目です</p>
と表示されます。
しかし、その後何回もfocusをあてて、外してを繰り返すと何行も
<p class='error'>必須項目です</p>
が追加されてしまいます。

該当のソースコード

        $(":text.validate,textarea.validate").on('blur', function() {
        	$(this).filter(".required").each(function(){
            	    if($(this).val()==""){
                        if( !$(this).parent('p.error').length ) {
                	        $(this).parent().prepend("<p class='error'>必須項目です</p>");
                	    }
                    }else{
                        $(this).parent('p.error').remove();
                    }
            });
        });

試したこと

parentをparentsやclosestで試しましたが一緒でした。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

###原因
.lengthできちんとp.errorの存在を判定している意図が見て取れますね。

なのになぜできないのか？

問題は.parent()です。これは親要素を指定するメソッドです。

しかし挿入先は.parent().prepend()なので兄要素になっているはず。

###解決策
なので兄要素を指定する.prev()メソッドを使ってあげれば解決すると思います。

jQeury
1$(":text.validate,textarea.validate").on('blur', function() {
2  $(this).filter(".required").each(function(){
3    if($(this).val()==""){
4      // if( !$(this).parent('p.error').length ) {
5      if( !$(this).prev('p.error').length ) { // .prev() で兄要素を指定してあげる
6        $(this).parent().prepend("<p class='error'>必須項目です</p>");
7      }
8    }else{
9      $(this).parent('p.error').remove();
10    }
11  });
12});