在窗口调整大小时更改 jQuery Validate errorPlacement

Question

我正在尝试更改不同设备上的错误消息，因为例如，在台式机上，我有 6 个输入，3 合 3，平板电脑 2 合 2，移动设备 1 合 1，占 100%。

根据设计规范，消息必须按输入块一起显示。因此，在桌面上，每输入 3 次后，错误消息应以 3 比 3 的比例显示。

我还有其他要在每台设备上输入的错误消息。

    <div class="col-xs-12 col-sm-4 col-sm-offset-2 col-md-3">
        <label for="promotional-code">Código promocional</label>
        <input id="promotional-code" name="promotional_code" type="text">
    </div>

    <div class="col-xs-12 col-sm-4 col-md-2">
        <label for="first-name">Nombre</label>
        <input id="first-name" name="first_name" type="text">
    </div>

    <div class="col-xs-12 col-sm-10 col-sm-offset-2 error-tablet-first"></div>

    <div class="col-xs-12 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0">
        <label for="last-name">Apellidos</label>
        <input id="last-name" name="last_name" type="text">
    </div>

    <div class="col-xs-12 col-sm-10 col-sm-offset-2 error-desk-first"></div>

    <div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-2">
        <label for="email">Email</label>
        <input id="email" name="email" type="email">
    </div>

    <div class="col-xs-12 col-sm-10 col-sm-offset-2 error-tablet-second"></div>

    <div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-2 col-md-offset-0">
        <label for="mobile-number">Teléfono móvil</label>
        <input id="mobile-number" name="mobile_number" type="number">
    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">
        <label for="service">Servicio</label>
        <select id="service" name="service">
            <option value="">Seleccionar servicio</option>
            <option value="visa">Reparaciones</option>
            <option value="presupuestos">Presupuestos</option>
            <option value="urgencias">Urgencias</option>
            <option value="seguros">Seguros</option>
        </select>
    </div>

    <div class="col-xs-12 col-sm-10 col-sm-offset-2 error-tablet-third"></div>

    <div class="col-xs-12 col-sm-10 col-sm-offset-2 error-desk-second"></div>

例如，当它是桌面时，我将前三个消息放在标签“.error-desk-first”中

jQuery Validate 调用：

         $("#form").validate({
            ignore: null,
            errorPlacement: function(error, element) {
                if (desktop) {
                    if (element.attr("name") == "promotional_code"
                        || element.attr("name") == "first_name"
                        || element.attr("name") == "last_name") {
                        error.appendTo('.error-desk-first');
                    }
                    else if (element.attr("name") == "email"
                        || element.attr("name") == "mobile_number"
                        || element.attr("name") == "service") {
                        error.appendTo('.error-desk-second');
                    }
                }
                else if (tablet) {
                    if (element.attr("name") == "promotional_code"
                        || element.attr("name") == "first_name") {
                        error.appendTo('.error-tablet-first');
                    }
                    else if (element.attr("name") == "email"
                            || element.attr("name") == "last_name") {
                        error.appendTo('.error-tablet-second');
                    }
                    else if (element.attr("name") == "mobile_number"
                            || element.attr("name") == "service") {
                        error.appendTo('.error-tablet-third');
                    }
                    else if (element.attr("name") == "privacy_politic"
                            || element.attr("name") == "not_notify") {
                        var next = element.next();
                        error.insertAfter(next);
                    }
                    else {
                        error.insertAfter(element);
                    }
                }
                else {
                    error.insertAfter(element);
                }
            },
            rules: {
                promotional_code: "required",
                first_name: "required",
                last_name: "required",
                email: "required",
                mobile_number: "required",
                service: "required"
            },
            messages: {
                promotional_code: "Promotional code",
                first_name: "Firs name",
                last_name: "Last name",
                email: "Email",
                mobile_number: "Mobile number",
                service: "Service"
            }

文档准备好后，一切正常。但是当我尝试在页面调整大小事件中更新错误消息时，我试图破坏验证并重新创建它，但是桌面到平板电脑，仍然在桌面上显示错误消息。

我也尝试使用 errorPlacement 再次调用验证，但我什么也没得到。

有什么想法吗？我只发现使用 javascript 在每个设备上检索所有错误消息，因为它使用属性“id”创建它们，并在我感兴趣的地方创建一个 appendTo。

谢谢

Answer 1

您的方法的全部问题在于，一旦错误消息“放置”在布局中，插件就会简单地切换它们的可见性；它不会将它们重新“放置”在您的新位置。

我也尝试使用 errorPlacement 再次调用验证，但我什么也没得到。

您不能在页面上多次调用.validate()。所有后续调用都将被忽略。

我试图破坏验证并重新创建它，但桌面到平板电脑，仍然在桌面上显示错误消息。

首先销毁验证器是您再次调用.validate() 的唯一方法。在调整窗口大小之后执行此操作似乎应该可以工作。但是，您没有向我们展示这种方法，因此无法说明为什么这对您不起作用。

---

根据屏幕大小自定义 JavaScript 错误放置的整个想法过于复杂。您没有理由不能仅使用 CSS 媒体查询来做到这一点。

Answer 2

我发现了问题，没有改变位置，因为当我在表单上执行.destroy() 时，已经显示的错误消息不会破坏它们，它只会将它们留在display:none 中，因此，在回调时到函数.validate() 并显示错误消息，在与验证器先前创建的相同标记中执行此操作。

.destroy()完成后，必须手动删除错误信息标签。