时间戳

首页 > 解决方案 > 突出显示/错误不适用于“远程”验证

javascript - 突出显示/错误不适用于“远程”验证

问题描述

我将与 Bootstrap 4 和 chargify 一起使用，这需要在初始化时进行一些自定义。视觉自定义和 submitHandler 似乎不是问题。但是，我也在使用“远程”选项（文档），这似乎是我的问题所在。我当前的初始化是这样的：

// note: app.form is a cached jQuery object wrapping the form in question
app.form.validate({
    submitHandler: function (form) {
        if (form.valid()) {
            chargify.token(
              form,
              function success(token) {
                  document.querySelector('#chargifyToken').value = token;
                  form.submit();
              },
              function error(err) {
                  console.log('token ERROR - err: ', err);
              }
            );
        }
    },
    highlight: function (element) {
        $(element).addClass('is-invalid');
    },
    unhighlight: function (element) {
        $(element).removeClass('is-invalid');
    },
    errorClass: 'invalid-feedback',
    errorElement: 'div',
    rules: {
        "subDomain": {
            required: true,
            minlength: 2,
            remote: '../servlet/CheckSubDomainServlet'
        }
    }
});

为了完整起见，提供了整个初始化，但我不相信其中任何一个是相关的。

问题

当我检查我的子域时，如果我在空字段上模糊，它会正确突出显示该字段并在适当的 div 中显示“所需字段”错误。如果我输入一个字符并模糊，我会得到“最小长度”规则的正确行为。所以我可以相对确定 HTML 本身和高亮/错误行为是正确的。

但是当最终调用“远程” URL 时，行为并不像预期的那样。无论通过或失败，该字段都使用 突出显示".is-invalid"，这也隐藏了反馈 div。无论其隐藏状态如何，".invalid-feedback"div 也不会填充消息。

返回的 JSON 采用两种格式之一。第一个例子是失败，第二个是通过：

{
  "subDomain":"SubDomain can't be only numeric"
}

或者

{
  "subDomain":true
}

现在，文档对于远程选项来说不是很好，但我认为这是返回应该采用的形式。他们自己的链接示例似乎显示了这种签名。

如果我仍然不清楚：缺少的是当远程服务返回通行证时，该字段应该不突出显示。当它返回失败时，该字段应突出显示，并且服务传递的自定义消息应显示在错误字段中。

更新

我相信实际上是响应 JSON 搞砸了。如果我直接看验证源代码，它想看看是否response == true || response || response == "true"为真部分。这很奇怪，因为它还记录了这一点：“服务器端响应必须是 JSON 字符串，对于有效元素必须是“true”，对于无效元素可以是“false”、未定义或 null”。

当然，没有键匹配的 JSON 字符串是不存在的，文档也没有说明键应该是什么。我通过查看他们示例页面的返回消息进行推断。所以现在我不确定响应应该是什么，或者他们的示例页面实际上是如何成功运行的。如果我的响应是“true”或“Some message”格式的 html/text，根本没有 JSON，我觉得它会“工作”。

更新 2：解决方案

如果有人偶然发现这一点，答案就在 Sparky 的评论中，并且与我在第一次更新中的怀疑相符：服务器端返回的响应格式不正确。

响应应该在应用程序/文本中，并且整个响应正文应该包含：

"true"

或者

"Some custom error message"

完成此操作后，一切正常。事实证明，文档也很好，但我被“JSON 格式的字符串”这个术语吓到了，这实际上只是意味着“正确地用双引号括起来，并且只有有效的字符”。我认为这意味着需要一个完整的 JSON 对象。

标签： javascriptjquery-validate

解决方案

为了更容易找到，这里的答案来自 Sparky 在原始问题中的评论：

响应应该在应用程序/文本中，并且整个响应正文应该包含：

"true"

或者

"Some custom error message"

双引号是必需的，它不应该是任何类型的完整 JSON 对象。完成此操作后，一切正常。事实证明，文档也很好，但我被“JSON 格式的字符串”这个术语吓到了，这实际上只是意味着“正确地用双引号括起来，并且只有有效的字符”。我认为这意味着需要一个完整的 JSON 对象。

我们的 Java 代码最终会进行内部验证，并且已经可以访问 HttpServletResponse 类。然后它只是基于 HttpServletResponse.getWriter() 创建一个 PrintWriter 并写入它：

PrintWriter out = null;

// ... later ...
// "response" was passed in as type HttpServletResponse
out = response.getWriter();

// out is just a buffer for what gets dumped into response body
out.println(resultingString);
out.flush();
out.close();

推荐阅读