Question

在提出主要问题之前，我想描述一下我网站的文件结构，以便更好地进行概述。我的网站上有很多页面，这些页面通过index.php动态添加，这是index.php的代码

    <?php
include ('pages/tillBody.php');
include ('pages/navbar.php');
// Set the default name 
$ac = 'default.php'; 
// Specify some disallowed paths 
$disallowed_paths = array('tillBody', 'navbar', 'footer');
if(empty($_GET['ac'])){
$_SESSION["loggedin"] = false;
unset ($_SESSION['userstatus']);
unset ($_SESSION['loggedin']);
unset ($_SESSION["userfn"]);
unset ($_SESSION["userln"]);
unset ($_SESSION["useremail"]);
unset ($_SESSION["id"]);
session_unset();
session_destroy();
}
if (!empty($_GET['ac'])) {
    $q = basename($_GET['ac']); 
    // If it's not a disallowed path, and if the file exists, update $action
    if (!in_array($q, $disallowed_paths) && file_exists("pages/{$q}.php"))
    {
        $ac = $q.".php";
    }
}
// Include $action 
include("pages/$ac"); 

include("pages/footer.php");
?>

在我的页面文件夹中，我有150多个页面，有些页面具有触发Bootstrap 3.3.7模态的按钮，在同一页面中，模态剩余代码的一半来自PHP页面，我将向您展示稍后这是我页面之一的代码，其中包含按钮和模式的一半代码。

    <!--button for modal-->
        <button id="<?php if($row['id'] != NULL || trim($row['id']) !=''){echo $row['id'];}?>" type="button" class="btn-verified complaintId" style="color:#000; background: none; border: none;" data-toggle="complaintmodal"> Report</button>
    <!--compalaint modal start-->
    <div class="modal fade" id="complaintModal" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
           <div class="modal-content">
             <div class="cbgoverlay">
             </div>
           </div>
        </div>
   </div>
   <!--compalaint modal ends-->

当用户单击按钮时，它将触发模式，同时我运行我的jquery函数以通过ajax加载模式的其余内容。在我的custom.js文件中，我有此代码。

$('.complaintId').on('click',function(){
    complaintid=(this.id);
    $.ajax({
        method: 'POST',
        url: 'complaintmodalshow.php',
        data: {id:complaintid},
        success: function(data){
            $(".cbgoverlay").html(data);
            $('#complaintModal').modal({
                show:true
            });
        }
    });
});

从这里我正在加载模态的剩余模态代码，因为我需要从数据库中填充它，这是投诉模态秀.php的代码

<?php
if(!empty($_POST['id'])){
    $id = $_POST['id'];
    // connection to the Ddatabase
    $servername = "*******";
    $username = "*************";
    try {
    $db = new PDO("mysql:host=$servername;dbname=*********", $username, "***********");
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $id = trim($id);
    $id = stripslashes($id);
    $id = htmlspecialchars($id);
    $id = (int)$id;
    $query = "SELECT dou.businessName, dou.businessAddress, wp.discount, wp.dealitem, wp.expirydate, 
    wp.description, m.* FROM dineOwnerUser AS dou INNER JOIN webpromo AS wp ON dou.id = wp.ownerid 
    INNER JOIN menu AS m ON dou.id = m.ownerid
    WHERE dou.id = ?";

    $statement = $db->prepare($query);
    $statement->execute(array($id));
    $result = $statement->fetch(PDO::FETCH_ASSOC);
    echo"<div class='modal-header'>";
    echo"<button type='button' class='close' data-dismiss='modal'>&times;</button>";
    echo"<h2 class='modal-title text-center' style='color:#8f0000d6'>Report to ".$result['businessAddress']."</h2>";
    echo"</div>";
    echo"<div class='modal-body'>";
    echo"<form id='complaintForm'>";
        echo"<div class='form-group'>";
            echo"<label class='control-label' for='complaintAbout'>Report / Complaint about* :</label>";
            echo"<input type='text' class='form-control' id='complaintAbout' placeholder='Report / Complaint about' name='complaintAbout'>";
            echo"<div class='alert alert-danger hidden' id='complaintAbouterrbox'></div>";
        echo"</div>";
        echo"<div class='form-group'>";
            echo"<label class='control-label' for='complaintDetail'>Report / Complaint detail* :</label>";
            echo"<textarea type='text' rows='5' class='form-control' id='complaintDetail' placeholder='Report / Complaint detail' name='complaintDetail'></textarea>";
            echo"<div class='alert alert-danger hidden' id='complaintDetailerrbox'></div>";
        echo"</div>";
        echo"<div class='form-group'>";
            echo"<label class='control-label' for='complainerEmail'>Your email id* :</label>";
            echo"<input type='email' class='form-control' id='complainerEmail' placeholder='Your email id' name='complainerEmail'>";
            echo"<div class='alert alert-danger hidden' id='complainerEmailerrbox'></div>";
        echo"</div>";
        echo"<div class='form-group'>";
            echo"<div class='g-recaptcha' data-sitekey='**************'></div>";
        echo"</div>";
        echo"<button type='button' id='complaintsubmit' class='btn btn-primary btn-block'>Submit</button>";
    echo"</form>";
    echo"</div>";
    echo"<div class='modal-footer'>";
    echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
    echo"</div>";
}
    catch(PDOException $e)
    {
        echo "Connection failed: " . $e->getMessage();
    }
$db = null;
exit;
}
?>

我确实从该网站上阅读了很多答案，但找不到答案。在我的外部文件custom.js中，我有自己的验证插件，可以在其他页面上正常工作，但不验证此引导程序模式，我认为原因是此模式在DOM加载后加载，或者可能来自php这就是为什么它发生的原因。有人可以帮帮我，如何从custom.js文件中验证它，因为我没有收到任何错误，看来这个模态根本不存在，但是此模态完美地呈现了仅验证不起作用的情况。当我将验证代码放在同一页上（complaintmodalshow.php）时，它工作正常。我不想这样做，我想将我所有的js编码都放在一个地方。有人可以建议我更好的解决方案吗？这是我的验证代码，仅供更好的概述。

"use strict";
$(document).ready(function(){
function showerror(errbox, errcontent){
        if($(errbox).hasClass("hidden")){
            $(errbox).removeClass("hidden");
            $(errbox).html(errcontent);
        }
    }
    function hideerror(errbox, errcontent){
        if(!$(errbox).hasClass("hidden")){
            $(errbox).html(errcontent);
            $(errbox).addClass("hidden");
        }
    }
(function ($){
$.fn.alphanumericspace = function(element, errbox){
var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/
    if(!alphanumericspace.test(element)){
        errcontent = "Only alphabets, numbers, dot, comma are allowed.";
        showerror(errbox, errcontent);
    }
    if(alphanumericspace.test(element)){
        if(element != " " && element.length>0){
            errcontent = "";
            hideerror(errbox, errcontent);
            return "no error";
        }
    }
}
function keepcheckingemail(element, errbox){
var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/
    $("#email").keyup(function(){
        if(!emailfilter.test(element)){
            errcontent = "invalid email";
            showerror(errbox, errcontent);
        }
        if(emailfilter.test(element)){
            if(element != " " && element.length>0){
                errcontent = "";
                hideerror(errbox, errcontent);
                return "no error";
            }
        }
    });
}
$.fn.emailfil = function(element, errbox){
var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/
    if(!emailfilter.test(element)){
        errcontent = "invalid email";
        showerror(errbox, errcontent);
        $("#email").focus();
        keepcheckingemail(element);
    }
    if(emailfilter.test(element)){
        if(element != " " && element.length>0){
            errcontent = "";
            hideerror(errbox, errcontent);
            return "no error";
        }
    }
}
}(jQuery));
$("#complaintAbout").keyup(function(){
    alert("complaintAbout");
    complaintAbout = $("#complaintAbout").val();
    errbox = $("#complaintAbouterrbox");
    complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox);
    if(complaintAbouterr === "no error"){
        complaintAbouterr = "no";
    }
});
$("#complaintDetail").keyup(function(){
    complaintDetail = $("#complaintDetail").val();
    errbox = $("#complaintDetailerrbox");
    complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox);
    if(complaintDetailerr === "no error"){
        complaintDetailerr = "no";
    }
});
$("#complainerEmail").focusout(function(){
    complainerEmail = $("#complainerEmail").val();
    errbox = $("#complainerEmailerrbox");
    complainerEmailerr = $(this).emailfil(complainerEmail, errbox);
    if(complainerEmailerr === "no error"){
        complainerEmailerr = "no";
    }
});
});

Answer 1

好，所以我已经弄清了问题所在，我将回答我自己的问题，以防万一有人在寻找这种解决方案：

问题：问题是我的引导程序模态在DOM加载后正在加载，因为我正在为此使用php，并且在某些情况下，如您在我的问题中看到的那样，此模态加载了，这意味着我的验证插件会在此模式之前加载，因此插件无法对此进行验证。为了实现所需的解决方案，我必须给jQuery选择器提供选择器，当js文件加载时它应该已经存在了，所以我稍微改变了我的功能并添加了下面提到的另一行

$(".cbgoverlay").on("click", function (){
//old plugin puts inside
});

现在这是该类的主要技巧“ cbgoverlay” 在我的页面加载时就已经存在，稍后将进行模态代码的其余部分，因此当用户单击模态时，此函数将首先运行，然后运行内部功能将选择稍后通过php页面呈现或加载的元素。要理解这种逻辑，您必须正确阅读我的整个问题。最终的解决方案在这里。

"use strict";
$(document).ready(function(){
/*complaint modal starts*/
var complaintid, complaintAbout, errbox, complaintAbouterr, errcontent, complaintDetail, robotError, complaintDetailerr;
var complainerEmail, complainerEmailerr, recaptcha;
$('.complaintId').on('click',function(){
    complaintid=(this.id);
    $.ajax({
        method: 'POST',
        url: 'complaintmodalshow.php',
        data: {id:complaintid},
        success: function(data){
            $(".cbgoverlay").html(data);
            $('#complaintModal').modal({
                show:true
            });
        }
    });
});
function showerror(errbox, errcontent){
        if($(errbox).hasClass("hidden")){
            $(errbox).removeClass("hidden");
            $(errbox).html(errcontent);
        }
    }
    function hideerror(errbox, errcontent){
        if(!$(errbox).hasClass("hidden")){
            $(errbox).html(errcontent);
            $(errbox).addClass("hidden");
        }
    }
(function ($){
$.fn.alphanumericspace = function(element, errbox){
var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/
    if(!alphanumericspace.test(element)){
        errcontent = "Only alphabets, numbers, dot, comma are allowed.";
        showerror(errbox, errcontent);
    }
    if(alphanumericspace.test(element)){
        if(element != " " && element.length>0){
            errcontent = "";
            hideerror(errbox, errcontent);
            return "no error";
        }
    }
}
function keepcheckingemail(element, errbox){
var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/
    $("#email").keyup(function(){
        if(!emailfilter.test(element)){
            errcontent = "invalid email";
            showerror(errbox, errcontent);
        }
        if(emailfilter.test(element)){
            if(element != " " && element.length>0){
                errcontent = "";
                hideerror(errbox, errcontent);
                return "no error";
            }
        }
    });
}
$.fn.emailfil = function(element, errbox){
var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/
    if(!emailfilter.test(element)){
        errcontent = "invalid email";
        showerror(errbox, errcontent);
        $("#email").focus();
        keepcheckingemail(element);
    }
    if(emailfilter.test(element)){
        if(element != " " && element.length>0){
            errcontent = "";
            hideerror(errbox, errcontent);
            return "no error";
        }
    }
}
}(jQuery));
$(".cbgoverlay").on("click", function (){
    $("#complaintAbout").keyup(function(){
        complaintAbout = $("#complaintAbout").val();
        errbox = $("#complaintAbouterrbox");
        complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox);
        if(complaintAbouterr === "no error"){
            complaintAbouterr = "no";
        }
    });
    $("#complaintDetail").keyup(function(){
        complaintDetail = $("#complaintDetail").val();
        errbox = $("#complaintDetailerrbox");
        complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox);
        if(complaintDetailerr === "no error"){
            complaintDetailerr = "no";
        }
    });
    $("#complainerEmail").focusout(function(){
        complainerEmail = $("#complainerEmail").val();
        errbox = $("#complainerEmailerrbox");
        complainerEmailerr = $(this).emailfil(complainerEmail, errbox);
        if(complainerEmailerr === "no error"){
            complainerEmailerr = "no";
        }
    });
});
/*complaint modal ends*/
});

通过使用此代码，您可以从问题中上面提到的php页面加载模式，也可以验证表单。祝好运。继续学习。

DOM加载后验证引导程序模态形式和模态载荷

1 个答案: