如何更改默认的 jquery 验证对话框？答案

【问题标题】：How to change the default jquery validation dialog?如何更改默认的 jquery 验证对话框？
【发布时间】：2017-09-08 07:45:07
【问题描述】：

我在联系表单中使用 jQuery 验证。成功消息显示在警告框中，但我想改用引导成功消息。

//On click of submit button 
$("#submit").click(function(){
$("#submit").css({"cursor":"default","box-shadow":"none"});
alert("Form Submitted Successfully..!!");

我想在 jQuery 中使用 HTML div：

<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用

var html = '<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>';

现在在成功事件的任何地方添加或添加它：-

$("#submit").click(function(event){ 
$("#submit").css({"cursor":"default","box-shadow":"none"}); 
//alert("Form Submitted Successfully..!!"); 
var html = '<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>';
$('form').prepend(html);
event.preventDefault()
});

【讨论】：

是的，当然你可以这样做，如果提醒你使用我上面的代码。
我是这样使用的 $("#submit").click(function(){ $("#submit").css({"cursor":"default","box-shadow ":"none"}); //alert("表单提交成功..!!"); var html = '
成功！ 表示成功或积极行动。
'; });但它不工作
你能在这行告诉我吗[$('form').prepend(html); ] 表单是表单名称？
可以用class，我用过form标签，如果页面有单form可以考虑。

【解决方案2】：

试试Sweet Alert。这是一个用于自定义引导 UI 警报框的库。对于成功消息，只需包含 js 文件并从您的成功函数中调用它

swal(
 'Message 1',
 'Message 2',
 'success'
);

【讨论】：

【解决方案3】：

假设以下来源

`<html>
    <style>
        .message{display:none;}
    </style>
    <body>
        <div class="message">
            <div class="alert alert-success">
                <strong>Success!</strong> Indicates a successful or positive action.
            </div>  
        </div>
        <form>
            !! form content over here
            <input type="button" id="submit" />
        </form>
        <script>
            $("#submit").click(function(){
                $("#submit").css({"cursor":"default","box-shadow":"none"});
                $(".message").show();
            });
        </script>
    </body>
</html>`

希望对你有帮助！！！

【讨论】：