0

入力テキストフィールドに次のコードがあります。

<%= f.label :first_name %>
<%= f.text_field :first_name, class: 'required' %>

次の HTML を生成します。

    <label for="user_first_name">First name</label>
    <input class="required" id="user_first_name" name="user[first_name]" size="30" type="text" />

Rails でフィールドを検証すると、HTML が次のように変化することに気付きました。

    <div class="field_with_errors"><label for="user_first_name">First name</label></div>
    <div class="field_with_errors"><input class="required" id="user_first_name" name="user[first_name]" size="30" type="text" value="" /></div>

しかし、jQuery を使用してクライアント側で最初に検証したいと考えています。したがって、次のコードを提供します。

$(document).ready(function(){
  $('#new_user').submit(function(event){
    $('.required').each(function(){
      if(!$.trim($(this).val()))
      {
        $(this).before('<div class="field_with_errors">');
        $(this).after('</div>');
        event.preventDefault();
      }
    });
  });
});

しかし、それはこのコードを生成します:

<div class="field_with_errors"></div>
<input class="required" id="user_first_name" name="user[first_name]" size="30" type="text" value="" />

div が間違った場所で閉じます...何かアイデアはありますか?

マイク

4

1 に答える 1

2

wrap()要素をワープするために使用します

http://api.jquery.com/wrap/

before()after()ターゲット要素の前または後に要素を追加すると、期待どおりに要素がラップされません。変化する、

$(this).before('<div class="field_with_errors">');
$(this).after('</div>');

に

$(this).wrap('<div class="field_with_errors" />');
于 2012-12-14T06:13:33.460 に答える