顯示形式的錯誤使用JavaScript在自舉

Question

我有一個輸入文本字段以下代碼：

<%= 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" /> 

我注意到，如果我驗證與所述字段導致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> 

但我想首先在客戶端驗證jQuer年。所以，我提供了下面的代碼：

$(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="" /> 

股利關閉在錯誤的地方...任何想法？

邁克

Answer 1

使用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" />');