javascript - 用jquery浮动

Question

我正在用 javascript 进行验证，并且需要在提交表单时为每个字段创建一个浮动 div

我正在使用blur检查字段，但不知道如何创建浮动 div

如下图所示

有人有想法吗？

[字段 1] [浮动错误消息]

[字段 2] [浮动错误消息]

[字段 3] [浮动错误消息]

Answer 1

在模糊的字段之后附加浮动 div

$('input[type=text]').blur(function() {
  // do your validation
  if (error) {
    $('<p>')
      .text('Validation Error: '+error)
      .css('float', 'left')
      .insertAfter(this);
  }
});

恕我直言，最好将所有样式保留在 CSS 中。我会亲自将“.css()”调用替换为“.addClass()”，然后设置一个样式规则来浮动错误消息。如果使用这种方法，并且字段最初是这样包装的：

<div class="field">
  <label>Name:</label>
  <input type="text" name="name" placeholder...>
</div>
<div class="field">
  <label>Email:</label>
  <input type="text" name="email" placeholder...>
</div>
...

然后清除验证就像这样简单：

$(this).siblings('.validation-error').remove();

Answer 2

如果您要求技术，那么字段元素之后的任何内联元素都可以解决问题。前任。

<input type="text" name="firstName"><span>show on error</span><br />
<input type="text" name="lastName"><span>show on error</span><br />
<input type="text" name="empId"><span>show on error</span><br />

最初隐藏这些错误（通过样式）并在验证时通过脚本显示/隐藏它们，

if(err_cond_of_elem) 
    $(elem).next().show(); 
else 
    $(elem).next().hide();

编辑：

如果您的错误是动态的，那么您可以通过.html()JQuery 的方法添加它们

$(elem).next().html(custom_err_message).show(); 

Answer 3

由于您没有提供任何标记或代码，我将为我的回复提供一个模式。这就是我将如何做到这一点。

1.) 在标记中使用文本输入和错误消息创建表单。所以标记可能是这样的：

<form id="whatever">
<fieldset>
<input type="text" id="1" value=""/><div id="error1">text for error 1</div>
<input type="text" id="2" value=""/><div id="error2">text for error 2</div>
<input type="text" id="3" value=""/><div id="error3">text for error 3</div>
</fieldset>
..
..
</form>

2.) 创建您的 CSS 以向左浮动文本输入。错误 div 可以设置为 display:none, float:left; 这将确保在页面加载并正确浮动时隐藏错误消息。另外，我的理念是让 HTML 做 HTML，让 CSS 做 CSS，让 JS 做 JS。因此，与其用 jquery 操作 dom，不如在页面上放置标记和内容，并使用 css 来处理初始可见性和定位。不需要用 js 来做。

3.) 然后，在您检查模糊输入值的方法中，如果验证检测到错误，您所要做的就是使用 .show() 显示相应的错误。然后当用户纠正输入并通过验证检查时，将相应的错误设置为 .hide()。