Question

如果表单上的字段为空，当我单击按钮指示错误时，我会触发一个css。但是，这仅在页面不在母版页中时才有效。当页面在母版页中并且我单击按钮时出现此错误：

这是css上的代码：

    [ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 3px;
  padding: 4px 25px 5px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 12px;
  pointer-events: none;

  font-family: Ubuntu-Regular;
  color: #c80000;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f12a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 18px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}

这是我页面中的代码：

    <%@ Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true" CodeBehind="Usuario.aspx.cs" Inherits="Web.Usuario" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!DOCTYPE html>
    <html lang="zxx" class="no-js">
    <head>
        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Favicon-->
        <link rel="shortcut icon" href="img/fav.png">
        <!-- Author Meta -->
        <meta name="author" content="Colorlib">
        <!-- Meta Description -->
        <meta name="description" content="">
        <!-- Meta Keyword -->
        <meta name="keywords" content="">
        <!-- meta character set -->
        <meta charset="UTF-8">
        <!-- Site Title -->
        <title>Destinos Naturales S.A</title>

        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->  
    <link rel="icon" type="image/png" href="images2/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor2/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts2/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor2/animate/animate.css">
<!--===============================================================================================-->  
    <link rel="stylesheet" type="text/css" href="vendor2/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor2/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor2/select2/select2.min.css">
<!--===============================================================================================-->  
    <link rel="stylesheet" type="text/css" href="vendor2/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css2/util.css">
    <link rel="stylesheet" type="text/css" href="css2/main.css">
<!--===============================================================================================-->

        <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
            <!--
            CSS
            ============================================= -->
            <link rel="stylesheet" href="css/linearicons.css">
            <link rel="stylesheet" href="css/owl.carousel.css">
            <link rel="stylesheet" href="css/font-awesome.min.css">
            <link rel="stylesheet" href="css/magnific-popup.css">
            <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <link rel="stylesheet" href="css/bootstrap.css">
            <link rel="stylesheet" href="css/main.css">
        </head>
        <body>

            <!-- Start Contact Area -->
            <section class="contact-area" id="contact">
                <div class="container-fluid">
                    <div class="row align-items-center d-flex justify-content-start">
                        <div class="col-lg-6 col-md-12 contact-left no-padding">
                            <div style=" width:100%;
                            height: 545px;" id="map"></div>
                        </div>
                        <div class="col-lg-4 col-md-12 pt-100 pb-100">
                            <form class="login100-form validate-form flex-sb flex-w">
                    <span class="login100-form-title p-b-51">
                        Usuario
                    </span>

                    <div>
                    <asp:TextBox ID="txtid" class="input100" type="numeric" readonly="true" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-16" data-validate = "La cédula es requerida">
                        <asp:TextBox ID="txtCedula" placeholder="Ingrese la Cédula" class="input100" type="numeric" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-16" data-validate = "El nombre es requerido">
                        <asp:TextBox ID="txtNombre" placeholder="Ingrese el Nombre" class="input100" type="text" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-16" data-validate = "los Apellidos son requeridos">
                        <asp:TextBox ID="txtApellidos" placeholder="Ingrese los Apellidos" class="input100" type="text" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                     <div class="wrap-input100 validate-input m-b-16" data-validate = "El usuario es requerido">
                        <asp:TextBox ID="txtUsuario" placeholder="Ingrese el Usuario" class="input100" type="text" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-16" data-validate = "La contraseña es requerida">
                        <asp:TextBox ID="txtContrasena" placeholder="Ingrese la Contraseña" class="input100" type="password" runat="server"></asp:TextBox>
                        <span class="focus-input100"></span>
                    </div>

                    <div class="flex-sb-m w-full p-t-3 p-b-24">
                        <div class="contact100-form-checkbox">

                        </div>

                        <div>

                        </div>
                    </div>

                    <div class="container-login100-form-btn m-t-17">
                        <asp:Button ID="btnGuardar" class="login100-form-btn" runat="server" Text="Guardar" OnClick="btnGuardar_Click" />
                    </div>

                </form>



                        </div>
                    </div>
                </div>
            </section>
            <!-- End Contact Area -->

                <div id="dropDownSelect1"></div>

<!--===============================================================================================-->
    <script src="vendor2/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor2/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor2/bootstrap/js/popper.js"></script>
    <script src="vendor2/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor2/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor2/daterangepicker/moment.min.js"></script>
    <script src="vendor2/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src="vendor2/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
    <script src="js2/main.js"></script>

<script src="js/vendor/jquery-2.2.4.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
            <script src="js/vendor/bootstrap.min.js"></script>
            <script src="js/owl.carousel.min.js"></script>
            <script src="js/jquery.ajaxchimp.min.js"></script>
            <script src="js/jquery.sticky.js"></script>
            <script src="js/parallax.min.js"></script>
            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script src="js/jquery.magnific-popup.min.js"></script>
            <script src="js/main.js"></script>
        </body>
    </html>
</asp:Content>

Answer 1

母版页应如下所示：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" 
    Inherits="MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <%--all meta tags--%>
    <%--all scripts put here will be available to every page that uses this master.--%>

    <asp:ContentPlaceHolder id="head" runat="server">
        <%--note this content placeholder in the head. don't put anything in it yet.
            it will be available to pages that use this master.--%>
    </asp:ContentPlaceHolder>
</head>
<body>

    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>

    <%--add script tags and links-to-js before the closing body tag.
        they will be available to every page that uses this master page.--%>

</body>
</html>

使用母版页的表单如下所示：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" 
    AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <%--this is the content placeholder from the head of the master.
        add styles and links-to-css for use on just this page.--%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    content for this page.

    <%--add scripts for just this page.--%>
</asp:Content>

当页面加载到母版页中时，css不会触发，但是当页面未嵌套到母版页时它会执行

1 个答案: