jQuery 验证远程失败时打开模式答案

【问题标题】：Open modal when jQuery validation remote failsjQuery 验证远程失败时打开模式
【发布时间】：2013-02-08 13:06:31
【问题描述】：

我正在使用 jQuery 验证插件，效果很好。

我希望能够在远程 ajax 失败时既显示消息又触发模式（示例中为alert()）。我无法弄清楚如何做到这两点。现在，它按预期触发了 alert()，但还附加了错误消息“请修复此字段”，这应该是我自己的自定义错误消息。

这是我得到的：

$("#adresse-form").validate({

        errorElement: "span",

        rules: {

            navn: {
                required: true,
                minlength: 5,
                maxlength: 25
            },
            tlf: {
                required: true,
                digits: true,
                minlength: 8,
                remote: {
                    url: "/ajax/check_tlf",
                    type: "post"
                }
            }
        },

        messages: {

            navn: "Field Name is required",
            tlf: {
                required: "Field tlf is required!",
                remote: function () { // i want to add the message aswell, not just the alert

                    alert("failed - tlf is already taken!");
                }
            }

        },
        submitHandler: function(form) {
            doSomethingGreatOnSuccess();
        },

        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        }

    });

【问题讨论】：

标签： jquery ajax jquery-validate

【解决方案1】：

引用 OP 评论：“返回的字符串每次都有效，但是 .reveal() 仅在页面加载后第一次触发。”

我认为您只会获得一次模式，因为 Validate 插件只会构建一次消息（然后使用隐藏/显示）。如果您希望每次都触发它，请尝试使用 highlight 回调函数。与onkeyup 和onfocusout 结合使用，设置为false。

onkeyup: false,
onfocusout: false,
highlight: function(element, errorClass) {
   if ($(element).attr('name') === 'remotefieldname') {
       $('#myModal').reveal();
   }
}

演示：http://jsfiddle.net/NFRvT/1/

【讨论】：

它仍然只触发一次警报（）或揭示（）。页面加载，本地和 jsfiddle 示例。
@nielsiano，看我的编辑。 highlight 每次都会触发，但我又让它陷入了与 Safari 的无限循环。也许它会更好地与您的模态一起使用。
非常感谢您的努力。现在它每次都会触发，但会继续这样做，即使第二个输入是正确的并且不应该触发错误。与模态或警报相同。
@nielsiano，您是否尝试过禁用onkeyup 和onfocusout，以便仅在提交事件上触发验证？ jsfiddle.net/exs5c/1
这行得通，但我宁愿不禁用 onkeyup 和 onfocusout，我喜欢这些功能。有没有其他方法可以解决这个问题？使用 addmethod 并在其中创建 ajax 调用和消息怎么样？这样做可行吗？

【解决方案2】：

我从不知道消息可以是函数，通常消息是字符串。但是，正如您所演示的，消息可以是函数。没有显示消息的原因是如果消息是函数，则它必须返回字符串。

rules : {...}
messages: 
{
    tlf: 
    {
        required: "Field tlf is required!",
        remote: function (val) 
        {
           alert("failed - " + val + " is already taken!");
           return "remote validation failed";
        }
    }
}

【讨论】：

虽然，您可能想要构建一个 jsFiddle 并首先对其进行测试...我使用此代码让我的浏览器陷入了无限循环。 jsfiddle.net/zDxgA
到目前为止，我只在 Safari 中看到它...在 alert() 上单击“确定”会无限触发新的 alert()...。你无法摆脱困境。因此，再三考虑，我不建议在 message 中使用函数；至少不是alert()。
它不应该是警报，而是触发带有一些信息的模式/弹出窗口。那会改变什么吗？就像现在一样，在 Chrome 中 alert() 只工作一次，直到页面重新加载。
remote: function (val) { $('#myModal').reveal(); return "remote validation failed"; } 返回的字符串每次都有效，但 .reveal() 仅在页面加载后第一次触发。不知道为什么。
@nielsiano，请构建一个包含模态的 jsFiddle 演示。

【解决方案3】：

这是我的工作方式：

jQuery.validator.addMethod("avail",function(value,element){
    var isSuccess = true;

    $.ajax({
        url: "/avail",
        type: 'POST',
        data: { tlf: value },
        async: false,
        success: function (msg) {
            isSuccess = msg === "true" ? true : false;
            if (!isSuccess) {
                $('#myModal').reveal();
            }
        }
    });
    // return isSuccess;
});

在规则中：

tlf: {
                required: true,
                digits: true,
                minlength: 8,
                avail: true
            }

还有消息：

tlf: {
                required: 'Must enter phone number',
                avail: 'Phone number is already taken!'
            },

对于有类似问题的任何人，我在这里找到了很多帮助：https://stackoverflow.com/a/2628442/839716

【讨论】：