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

应在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上运行，这就是我所需要的。

致谢

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

2 个答案: