Question

我正在尝试更改不同设备上的错误消息，因为，例如，在桌面上，我有6个输入放置3个3，平板电脑放置2个2，移动放置1个1占100％。 / p>

根据设计规范，消息必须通过输入块一起显示。因此，在桌面上，每3次输入后，错误消息应显示为3 in 3。

An example on desktop

我还需要在每台设备上输入错误消息。

    <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再次调用validate，但我也什么都没得到。

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

Thank's

Answer 1

您的方法的整个问题是，一旦错误消息被“放置”在布局中，插件就会简单地切换它们的可见性;它不会将它们“放置”到您的新位置。

我还尝试使用errorPlacement再次调用validate，但我也什么都没得到。

您无法在页面上多次呼叫.validate()。所有后续调用都将被忽略。

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

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

基于屏幕大小自定义JavaScript错误放置的整个想法过于复杂。没有理由不能单独使用CSS媒体查询。

Answer 2

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

完成.destroy()后，您必须手动删除错误消息标记。

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

2 个答案: