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

在Bootstrap中使用JavaScript显示表单错误

1 个答案: