使用asp.net主页的Jquery Bootstrap验证无法正常工作

时间:2015-03-12 03:01:30

标签: javascript jquery asp.net

我正在使用jQuery Bootstrap验证插件,但它没有显示任何消息: 我的javascript名称是validator.js

        <script type="text/javascript">


$(document).ready(function () {
$('#forget').bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        txtemailids: {
            validators: {
                notEmpty: {
                    message: 'The email id is required and cannot be empty'
                },
                regexp: {
                    regexp: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
                    message: 'Enter valid email id'
                }
            }
        }
    }
});
});

</script>

我正在使用母版页,它的html位于

之下
<head runat="server">
<title>Car Insurance</title>
<link href="../css/style.css" rel="stylesheet" type="text/" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />
<link href="../font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../css/acc.css" rel="stylesheet" type="text/css" />
<link href="../css/animate.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="../js/validator.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $(' #da-thumbs > li ').each(function () {
            $(this).hoverdir({
                hoverDelay: 50,
                inverse: true
            });
        });

    });
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>


<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>

我正在使用与母版页链接的网页,它的html在下面。此页面是aboutus.aspx,母版页是Visitors.Master

<%@ Page Title="" Language="C#" MasterPageFile="~/Visitors/Visitor.Master" AutoEventWireup="true"
CodeBehind="aboutus.aspx.cs" Inherits="Car_Insurance_System.Visitors.AboutUs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="../js/validator.js" type="text/javascript"></script>
<script type="text/javascript">

</script>


</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!-- Start Modal 3-->
<!-- Modal -->
<div class="modal
fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header
modal-header-success">
                <div class="three-login">
                    <div class="three-login-head">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×</button>
                        <img src="../images/top-key.png" alt="" />
                        <h3>
                            account reset</h3>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <h5>
                    Forgot Password or Username?</h5>
                <p>
                    To reset your account password or username, enter the email address and we will
                    send your instruction.</p>
                <br />
                <br />
                <div class="row">
                    <div class="col-md-8" id="forget">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" style="background-color: #f26122; border-color: #f26122">
                                    <i class="fa fa-envelope" style="color: #fff"></i></span>
                                <asp:TextBox ID="txtemailids" runat="server" CssClass="form-control" placeholder="Email Id"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="RequiredFieldValidator"
                            ControlToValidate="txtemailids" ValidationGroup="forgot"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="RegularExpressionValidator"
                            ControlToValidate="txtemailids" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                            ValidationGroup="forgot"></asp:RegularExpressionValidator>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn btn-block org3"
                    ValidationGroup="forgot" />
            </div>
        </div>
        <!-- /.modal-content
-->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<!-- End
Modal 3 -->

请帮助,因为我已经浪费了2天这个问题

1 个答案:

答案 0 :(得分:0)

Bootstrap js正在从表单元素中删除模式弹出窗口。 请在内容页面中使用以下js代码。它应该工作。

$(window).load(function () {
    $("#myModal3").appendTo($("form:first"));
});