将标签定位在正确的位置取决于它是错误的还是成功的

Question

对不起，如果这是一个太简单的问题，但这是一个我一直试图解决一段时间。

我试图在一个简单的表单上使用Jquery验证，我基本上有一切工作，因为它应该，但是我想把消息标签在不同的地方产生的验证取决于它是否是一个错误或成功。目前，我可以在字段之前或之后获得它们。我希望在字段之前填充任何错误，并在字段之后填充成功。

当前，当成功时，类别valid被添加到标签中。

这是我的小提琴。

任何帮助都将非常感激!

这是我的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()返回一个布尔值，因此您不需要将其与"valid"进行比较。if (error.hasClass("valid"))就够了

无论如何，这里的根本问题是双重的:

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

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

---

然而，由于highlight和unhighlight函数在字段在无效/有效之间切换时触发，您可以使用这两个选项来放置复选标记，而不是success和默认的错误消息容器。

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

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

2. 使用$(element).next('span').text(" ✓ ")和$(element).next('span').empty()添加/删除复选标记…

这两个函数中的其余代码是默认的，如果想保持默认功能，必须保留它们。

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/