如何使用默认broswer警报覆盖jQuery验证插件消息

我遇到了一种情况

我有一个表单，它以这样一种方式适合于设计，即我不能更新表单中的de DOM来显示验证消息

因此，假设下面的代码为例，我想知道如何用默认浏览器警报替换自定义jQuery验证插件DOM消息

$("form").validate({
    rules:{
        myName:{
            required: true, minlength: 2
        },
        myEmail:{
            required: true, email: true
        },
        myMessage:{
            required: true, minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type you name",
            minLength: "Your name must be at least 2 characters long"
        },
        myEmail:{
            required: "Type you e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minLength: Your message must be at least 2 characters long"
        }
    }
});

提前谢谢

上次自定义邮件缺少开头引号。 您的自定义应包含参数占位符{0}，这些占位符将自动替换为规则的值。 您还使用大写字母L在“自定义邮件”选项中拼写了minlength规则。 请尝试以下代码：

$("form").validate({
    rules:{
        myName:{
            required: true,
            minlength: 2
        },
        myEmail:{
            required: true,
            email: true
        },
        myMessage:{
            required: true,
            minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type your name",
            minlength: "Your name must be at least {0} characters long"
        },
        myEmail:{
            required: "Type your e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minlength: "Your message must be at least {0} characters long"
        }
    }
});

演示：

Quote OP：我想知道如何用默认浏览器警报替换自定义jQuery验证插件DOM消息

您的问题非常不清楚，但是动态更改消息的方法是使用动态更改规则，并且只指定要更改的消息。。。工作演示：

*除去*

编辑：

根据评论，OP最初要求提供一个JavaScript警报，该警报可以使用如下errorPlacement回调函数完成。因为error是一个对象，所以可以使用error.text仅使用其消息

    onkeyup: false,
    errorPlacement: function (error, element) {
        alert(error.text());
    },

我建议将onkeyup设置为false，以消除每次击键时的重复警报。如果您正在使用Safari，请不要尝试此演示，否则您将陷入无限循环中—在这种情况下使用alert的一个缺点

顺便说一句：我不建议在任何网站设计中使用过时的JavaScript警报

更好/建议：

为了获得更现代的用户体验，您应该将其与jQuery模式或工具提示插件（如）集成

工作示例：

以下代码来自

首先，在将显示错误的所有特定表单元素上初始化Tooltipster插件：

$document.readyfunction{ //初始化表单输入元素上的tooltipster $'myform输入[type=text]'。工具提示{ 触发器：'自定义'，//默认值为'hover'，这在这里不好 onlyOne:false，//允许一次打开多个提示 位置：“right”//在元素右侧显示提示 }; }; 其次，与一起使用可自动显示和隐藏工具提示，如下所示：

$document.readyfunction{ //初始化表单上的验证插件 $'myform'。验证{ //任何其他选项和规则， errorPlacement:函数错误，元素{ $element.data'tooltipsterContent'，$error.text； $element.data'plugin\u tooltipster'。显示工具提示； }, 成功：函数标签，元素{ $element.data'plugin\u tooltipster'.hideTooltip； } }; }; 上次自定义邮件缺少开头引号。 您的自定义应包含参数占位符{0}，这些占位符将自动替换为规则的值。 您还使用大写字母L在“自定义邮件”选项中拼写了minlength规则。 请尝试以下代码：

$("form").validate({
    rules:{
        myName:{
            required: true,
            minlength: 2
        },
        myEmail:{
            required: true,
            email: true
        },
        myMessage:{
            required: true,
            minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type your name",
            minlength: "Your name must be at least {0} characters long"
        },
        myEmail:{
            required: "Type your e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minlength: "Your message must be at least {0} characters long"
        }
    }
});

演示：

Quote OP：我想知道如何用默认浏览器警报替换自定义jQuery验证插件DOM消息

您的问题非常不清楚，但是动态更改消息的方法是使用动态更改规则，并且只指定要更改的消息。。。工作演示：

*除去*

编辑：

根据评论，OP最初要求提供一个JavaScript警报，该警报可以使用如下errorPlacement回调函数完成。因为error是一个对象，所以可以使用error.text仅使用其消息

    onkeyup: false,
    errorPlacement: function (error, element) {
        alert(error.text());
    },

我建议将onkeyup设置为false，以消除每次击键时的重复警报。如果您正在使用Safari，请不要尝试此演示，否则您将陷入无限循环中—在这种情况下使用alert的一个缺点

顺便说一句：我不建议在任何网站设计中使用过时的JavaScript警报

更好/建议：

为了获得更现代的用户体验，您应该将其与jQuery模式或工具提示插件（如）集成

工作示例：

以下代码来自

首先，在将显示错误的所有特定表单元素上初始化Tooltipster插件：

$document.readyfunction{ //初始化表单输入元素上的tooltipster $'myform输入[type=text]'。工具提示{ 触发器：'自定义'，//默认值为'hover'，这在这里不好 onlyOne:false，//允许一次打开多个提示 位置：“right”//在元素右侧显示提示 }; }; 其次，与一起使用可自动显示和隐藏工具提示，如下所示：

$document.readyfunction{ //初始化表单上的验证插件 $'myform'。验证{ //还有其他选择吗 s&rules， errorPlacement:函数错误，元素{ $element.data'tooltipsterContent'，$error.text； $element.data'plugin\u tooltipster'。显示工具提示； }, 成功：函数标签，元素{ $element.data'plugin\u tooltipster'.hideTooltip； } }; };

---

根据Sparky的建议，如果您不想包含工具提示插件，可以使用jQueryUI和一些CSS非常接近地模拟这种行为

CSS:

jQuery：

$('#myform').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element).position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });

    },
   //the rest of your validate options
});

---

这里的示例：

根据Sparky的建议，如果您不想包含工具提示插件，可以使用jQuery UI和一些CSS非常接近地模拟这种行为

CSS:

jQuery：

$('#myform').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element).position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });

    },
   //the rest of your validate options
});

---

示例：

请解释默认浏览器警报的含义。请解释默认浏览器警报的含义。感谢您花费的时间，并感谢您提供的提示。然而，代码仍然没有按需要的方式工作。当我指的是默认浏览器警报时，我指的是我不想将HTML附加到我的页面，我希望触发警报警报“Message here”。这是荒谬的，这样一个插件无法触发警报没有触发器选项@GilbertoAlbino，这是因为使用alert并不能用jQuery创建现代网站。改用jQuery工具提示或模态插件。请看下面的例子。是的，工具提示的想法正是我现在想要做的。谢谢你帮我提出来@GilbertoAlbino，我已经更新了我的答案，既有使用不推荐的警报的方法，也有使用jQuery工具提示插件的首选方法。请接受我的回答，因为它解决了你的问题。谢谢，非常感谢。。。但是如果使用警报，我需要在警报关闭后聚焦元素。。。我将继续使用ToolTipster感谢您花费的时间，并感谢您提供的提示。然而，代码仍然没有按需要的方式工作。当我指的是默认浏览器警报时，我指的是我不想将HTML附加到我的页面，我希望触发警报警报“Message here”。这是荒谬的，这样一个插件无法触发警报没有触发器选项@GilbertoAlbino，这是因为使用alert并不能用jQuery创建现代网站。改用jQuery工具提示或模态插件。请看下面的例子。是的，工具提示的想法正是我现在想要做的。谢谢你帮我提出来@GilbertoAlbino，我已经更新了我的答案，既有使用不推荐的警报的方法，也有使用jQuery工具提示插件的首选方法。请接受我的回答，因为它解决了你的问题。谢谢，非常感谢。。。但是如果使用警报，我需要在警报关闭后聚焦元素。。。我会和工具提示呆在一起