0

jQueryを使ってtextの入力チェックを行った時に、空の場合はエラーメッセージ表示用の要素を追加したいと考えています。以下のようなソースなのですが、何故か最後のtext要素(data-title="範囲"のところ)の次にしか要素が追加されません。
デバッグすると、各要素の下にafterで要素を追加しているはずなんです。
お力を貸していただけますでしょうか。

HTML

<div class="input_unit pt15 pb15">
  <p class="label"><span class="cont_req">必須</span>会社名</p>
  <div class="input_box">
    <input type="text" data-title="御社名">
  </div>
</div>

<div class="input_unit pt15 pb15">
  <p class="label"><span class="cont_req">必須</span>ふりがな</p>
  <div class="input_box">
    <input type="text" data-title="御社名ふりがな">
  </div>
</div>
<div class="input_unit pt15 pb15">
  <p class="label"><span class="cont_req">必須</span>範囲</p>
  <div class="input_box">
    <input type="text" data-title="範囲">
    <p>(例:埼玉県・栃木県など)</p>
  </div>
</div>

JS

(function($) {
$(function() {
$('#confirm').click(function(){
    checkInputAll();
});
});  
function checkInputAll() {
  var $inputTextAreas = $('input[type="text"]');
  var $msgFailure = $('<span class="input_failure"></span>');
  $($inputTextAreas).each(function(){
     if ($(this).val() == "") {
       var message = $(this).data("title") + "をご記入下さい";
       $msgFailure.text(message);
       $(this).after($msgFailure);
  }
});
}
})(jQuery);

1 件の回答 1

0

JS中の
$msgFailureの変数を使いまわしているせいで、クローンではなく要素の移動になってしまっています。

after

If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved rather than cloned:

afterのAPIは一致する要素が存在した場合はクローンは作成されずマッチした要素の移動が行われます。

ということで変数で使いまわさず、それぞれで設定すれば作成できると思います。

(function($) {
$(function() {
$('#confirm').click(function(){
    checkInputAll();
});
});  
function checkInputAll() {
  var $inputTextAreas = $('input[type="text"]');
  var $msgFailure = $('<span class="input_failure"></span>');
  $inputTextAreas.each(function(){
     if ($(this).val() == "") {
       $(this).after($('<span class="input_failure"></span>').text($(this).data("title") + "をご記入下さい"));
  }
});
}
})(jQuery);
1
  • keitaro_soさん ありがとうございます!動きました!何時間も悩んでいたので本当に助かりました!
    – user23368
    Commented 2017年6月27日 6:52

この質問に回答するには、ログインする必要があります。