使用ASP.NET母版页的Jquery Bootstrap验证不起作用

Question

I'm using jQuery Bootstrap validation plug-in, but it doesn't show any message: My javascript name is validator.js 我正在使用jQuery Bootstrap验证插件，但未显示任何消息：我的javascript名称是validateator.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>

I'm using masterpage,it html is below 我正在使用母版页，它的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>

i'm using webpage linked with master page,it's html is below.This page is aboutus.aspx and master page is Visitors.Master 我正在使用与母版页链接的网页，它的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 -->

please help as i have already wasted 2 days over this issue 请帮助，因为我已经在此问题上浪费了2天

Answer 1

Bootstrap js is removing modal popup from the form element. Bootstrap js正在从form元素中删除模式弹出窗口。 Please use the js code below in content page. 请在内容页面中使用下面的js代码。 It should work. 它应该工作。

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

使用ASP.NET母版页的Jquery Bootstrap验证不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-18 20:15:50

使用ASP.NET母版页的Jquery Bootstrap验证不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-18 20:15:50

解决方案1
0 已采纳 2015-03-18 20:15:50