AJAX - 避免将 javascript 代码加载到元素中

如何解决AJAX - 避免将 javascript 代码加载到元素中

背景

我正在使用 ajax 检查用户填写的表单。

在用户点击提交按钮（“外部脚本”）后加载的 php/javascript 执行的功能是检查相应的 <input> 字段，如果在特定的 <input> 元素，它将 (a) 将错误消息加载到预先准备好的 <span> 元素中，以及 (b) 将无效的 input 元素的格式更改为红色。>

这包含：

1. 用于评估用户输入并回显错误消息的 php 代码（如果发现任何错误）和
2. 修改 <input> 元素样式的 javascript（将 <input> 元素，其中错误由紧接前面的 php 代码标识为红色）。

问题

我面临的问题是，随着外部脚本的 php 部分生成的错误消息，javascript 部分也被加载到准备好的 <span> 元素中。

我当然希望加载外部脚本的 javascript 部分，而不是在 <span> </span> 元素内。请问有没有办法实现这一目标？ 请注意，我无法拆分外部脚本的 php 和 javascript 部分，因为 javascript 部分使用 php 部分设置的变量进行操作（例如 var error_empty_message = "<?php echo $error_empty_message;?>";

已编辑

MRE：

基础文件 html：

  <form class="form_a" id='registration_form' action="dispatch.php" method="post" enctype ="multipart/form-data">
       <div>
          <label>Contact Email</label>
       </div>
       <div>       
          <input id="mail_email" type= "text" name="email" placeholder="@email" />                        
       </div>
<!-- other similar entries follow -->

    <!-- submit button -->

    <div class='radio_cont'>       
       <button id='mail_submit' type='submit' name='submit' data-popup-open="popup-1">Submit bid</button>
        <button id='reset_f' type='reset'>Reset fields</button>                       
    </div>

 <!-- error message -->

    <div>       
    <span class='form_message'></span>                      
    </div>

加载js：

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var email = $("#mail_email").val();
    //other input values attributed to vars

    $(".form_message").load("dispatch.php",{
      email: email,//other input vars
    });
  })
});

dispatch.php：

<?php

if(isset($_POST['submit'])) 
{
 $email = $_POST['email'];
   if(empty($email)) 
    {
        echo "<span class='errorek'>Fill in the email please</span>";
        
        $error_empty_email = true;
        

    }

    elseif(!filter_var($email,FILTER_VALIDATE_EMAIL)) 
    {
        echo "<span class='errorek'>Enter a valid email adress</span>";
        $error_email = true;
    }
   
    //other checks follow

}

<script>
$("#mail_email").removeClass("input_error");

var error_empty_email = "<?php echo $error_empty_email;?>";
var error_email = "<?php echo $error_email;?>";

 if(error_email == true || error_empty_email == true) 
    {
        $("#mail_email").addClass("input_error");
    }
//...
</script>

解决方法

好吧，这似乎是一个纯粹的样式问题。由于某种原因，浏览器自己的 script {visibility:none} 样式已被覆盖。

在链接的 css 文件中/在 script {visibility:none} 标签中手动输入 script {visibility:none!important}（最终为 <style>）应该可以解决这个问题。

希望这可以帮助面临同样问题的人。