根据是错误还是成功将标签定位在正确的位置

Question

抱歉，如果这个问题太简单了，但我已经尝试解决了一段时间。

我正在尝试在一个简单的表单上使用 Jquery Validate，基本上一切正常，但是我想将验证生成的消息标签放在不同的地方，等待是否这是一个错误或成功。目前，我可以在场前或场后得到它们。我希望在该字段之前填充任何错误，并在该字段之后填充成功。

目前，当它成功时，class valid 被添加到标签中。

这是我的 Fiddle.

如有任何帮助，我们将不胜感激！

这是我的HTML：

<form id="new_user">
   <input class="row" id="name" name="user_name" placeholder="Name" required="required" type="text">
</form>

这是我最近的尝试：

JS：

$("#new_user").validate({
    success: function(label) {
        label.addClass("valid").text(" ✓ ")
    },
    errorClass: "invalid",
    errorPlacement: function(error, element) {
        if (error.hasClass("valid") == "valid" ) {
            alert("valid");
            error.insertAfter(element);
        } else {
            error.insertBefore(element);
        }
    } 
});

Answer 1

error.hasClass("valid") == "valid" 没有意义。 .hasClass() returns 一个布尔值，因此您无需将其与 "valid" 进行比较。 if (error.hasClass("valid")) 就够了。

无论如何，这里的根本问题有两个：

errorPlacement函数在class应用于元素之前触发。

errorPlacement 函数会触发一次，并且不会在发生变化时继续触发。它的唯一目的是将错误消息元素放置在布局中。完成后，插件只会切换它。因此，您不能使用 errorPlacement 根据 class.
动态更改标签的位置

但是，由于 the highlight and unhighlight functions 在字段在 invalid/valid 之间切换时触发，您可以使用这两个选项来放置复选标记而不是 success 和默认错误消息容器。

在每个输入元素后放置一个空的 <span></span> 容器。

<input type="text" name="foo"><span class="checkmark"></span>

使用$(element).next('span').text(" ✓ ")和$(element).next('span').empty()来add/remove复选标记...

这两个函数中的其余代码是默认代码，如果您想保持默认功能，则必须保留在原位。

highlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).addClass(errorClass).removeClass(validClass); }; $(element).next('span.checkmark').empty(); // remove the checkmark }, unhighlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).removeClass(errorClass).addClass(validClass); }; $(element).next('span.checkmark').text(" ✓ "); // add a checkmark }

演示：http://jsfiddle.net/o53ao9z6/

根据是错误还是成功将标签定位在正确的位置

Positioning a label in the correct place dependent on whether it is an error or a success

jquery

position

jquery-validate