如何使插件从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 concept

function valida(e) {

  e.preventDefault();

  console.log(e.type + ' event has been triggered and callback function valida() has been invoked.');

}

<form>

  <button type="submit">Save</button>

</form>

Answer 2

它没有为我的代码工作，但我能够看到另一条解决此问题的途径。

由于插件不接受内联编码，因此我删除了HTML表单上的onsubmit函数，此后，我需要使JS可用于将提交响应发送到HTML。

在这里，我附上了我更改的那段代码。

$(function() {

$('#btn_save').click(function(event){

    event.preventDefault();

    var HTF = document.getElementById("f");

    valida(f);

    //alert(ok);

    if (ok) {

    HTF.submit();

    }

});

});

但是，该插件在CHROME上不起作用，但在Firefox上却很好，这就是我所需要的。