jquery - 在 Bootstrap 中使用 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" />

我注意到，如果我使用 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 在错误的地方关闭...有什么想法吗？

麦克风

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