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

Question

我已经创建了一个代码来进行简单的选择并插入到数据库中。此代码在Web浏览器（Firefox和Chrome）上的html测试时有效。然而，这是一个插件，插件有自己的错误，json文件已经纠正，它插入信息。然而，有关JS的信息验证，插件正在跳过这部分。

表单有5个需要填写的字段和一个单选按钮，在此之后用户按下“保存”按钮，Js验证信息，如果它正确，它将它发送到插入信息的PHP，这适用于在网上执行。但是在插件上它会跳过这个验证并发送信息，但它填充到PHP中以便插入。

搜索后，我已经看到谷歌扩展指南和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

应该在submit事件上调用回调函数valida()。以下演示是绑定内容的简化布局，以及如何将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

非常感谢Zer00ne的回复，它对我的​​代码没有用，但我能够看到解决这个问题的另一条道路。

由于插件不接受内联编码，我删除了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，这就是我需要的。

问候