如何使插件从js文件中获取代码？

Question

我创建了一个代码，以进行简单的选择并将其插入数据库。在网络浏览器（Firefox和Chrome）上的html中测试该代码时，该代码有效。但是，这被认为是一个插件，该插件有其自身的错误，json文件已经得到纠正，并且它会插入信息。但是，有关JS的信息已得到验证，该插件正在跳过这一部分。

该表单有5个字段需要填写，并有一个单选按钮，此后用户将按下按钮“保存”，Js验证信息，如果正确，则将其发送给插入信息的PHP，这在以下情况下有效在网络上执行。但是在插件上，它跳过了此验证并发送信息，但是将其填充到PHP中以进行插入。

搜索后，我已经看过有关Google扩展和firefox开发人员的指南，尤其是这本指南（https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution）

我设法显示了消息，但是当您激活插件按钮而不是提交按钮时，它会检查字段。

index_FINAL.js *我减少了代码，只放置了几行进行验证，而不是全部

var ok = true;

function valida(f) {

    ok = true;

    var msg = "Empty fields:\n\n";

    if(f.id_own.value == "")

    {

      msg += "Ticket Owner\n ";

      ok = false;

    }

    if(f.Ticket.value == "")

    {

      msg += "Ticket ID\n";

      ok = false;

    }

    if(ok == false)

      alert(msg);

    else { }

    return ok;

  };  

  document.addEventListener('DOMContentLoaded', function () {

  var x = document.getElementById("btn_save");

  x.addEventListener("click", valida());

});

index_FINAL.html *我减少了代码，只是将html的末尾放在按钮和脚本所在的位置。

 <div id="tick_but">

              <br>

                <button type="submit" class="btn btn-success" id="btn_save">Save</button>

                <button type="reset" class="btn btn-danger" id="btn_cancel">Cancel</button>

            </div>

    </form>

  </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="index_FINAL.js" type="text/javascript"></script>

  </body>

</html>

当我尝试激活插件时，我收到了由js生成的消息，指示我有空字段，而不是单击“保存”按钮时调用了valida（）函数。

我希望它能在我单击保存按钮时进行检查。

Answer 1

回调函数valida()应在Submit事件上调用。以下演示是绑定内容以及如何将其放置valida()为Submit事件的回调的简化布局。这是假设<form>是该<form>特定网页（即index_FINAL.html）上的第一个或唯一document.forms[0].addEventListener("submit", valida);// This is just a dummy callback for proof of conceptfunction valida(e) {&nbsp; e.preventDefault();&nbsp; console.log(e.type + ' event has been triggered and callback function valida() has been invoked.');}<form>&nbsp; <button type="submit">Save</button></form>

Answer 2

它没有为我的代码工作，但我能够看到另一条解决此问题的途径。由于插件不接受内联编码，因此我删除了HTML表单上的onsubmit函数，此后，我需要使JS可用于将提交响应发送到HTML。在这里，我附上了我更改的那段代码。$(function() {$('#btn_save').click(function(event){&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var HTF = document.getElementById("f");&nbsp; &nbsp; valida(f);&nbsp; &nbsp; //alert(ok);&nbsp; &nbsp; if (ok) {&nbsp; &nbsp; HTF.submit();&nbsp; &nbsp; }});});但是，该插件在CHROME上不起作用，但在Firefox上却很好，这就是我所需要的。