Как заставить плагин взять код из файла js?

Question

Я создал код для простого выбора и вставки в базу данных. Этот код работает при тестировании из html в веб-браузере (Firefox & Chrome). Однако это было сделано, чтобы быть плагином, плагин имел свои собственные ошибки, файл 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

Большое спасибо Zer00ne за ваш ответ, он не сработал для моего кода, но я смог найти другой путь в решении этой проблемы.

Поскольку плагины не принимают встроенное кодирование, я удалил функцию onsubmit, которая была в форме HTML, и после этого мне нужно было сделать 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, и это то, что мне нужно.

С уважением

Answer 2

Функция обратного вызова 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>