Question

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

//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>

Answer 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()
});

Answer 2

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

中调用它

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

Answer 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>`

希望这可以帮助你!!!

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

3 个答案: