Как сделать проверку формы с помощью JS для расширения хром?

Question

Политика безопасности содержимого в Chrome говорит,

Встроенный JavaScript не будет выполнен. Это ограничение запрещает встроенные блоки и встроенные обработчики событий (например, <button onclick="...">).

Я хотел проверить данные с помощью JS. Поскольку onsubmit, onclick или что-то не может быть использовано, как я могу это сделать? Я новичок в JS и разработке расширений. Любая помощь развлекается.

Answer 1

Вы можете использовать addEventListener, например. что-то вроде этого:

// Function to add event listener to table 
var el = document.getElementById("targetElement"); 
el.addEventListener("click", function() { alert('Hoorey!'); }, false); 

это происходит в отдельном файле .js.

Answer 2

здесь мое решение с JQuery, учитывая ваш хочет, чтобы убедиться, что несколько входов действительны, а затем позволить пользователю отправить форму:

// selectors 
var input1 = $(#input1ID); // name 
var input2 = $(#input2ID); // phone 

// regular expressions 
var regexp_input1 = /^[a-zA-Z]$/; 
var regexp_input2 = /^([0-9]$/; 

// map object 
var your_form_map = { 
// map variables 
input1 : false, // if it is required 
input2 : true // if it is not required but you dont want the user input incorrect characters. 
} 

var invalid_color = "red"; 
var valid_color = "green"; 
function validForm (selector, regexp_variable, map_obj , map_var) { 
    selector.on('change keyup anyotherevent addwithspace',function(){ // CHANGE validates input with auto complete which you can hardly disable it with chrome. 
     if (regexp_variable.test($(this).val()) == false || $(this).val().trim().length === 0) { 
      $(this).css("color" : invalid_color); 
      map_obj[map_var] = false; 
      return false; 
     } else { 
      $(this).css("color" : text_valid); 
      map_obj[map_var] = true; 
      return true; 
     } 
    }); 
} 

теперь позволяет вызывать функцию валидатора:

validForm(input1, regexp_input1, your_form_map, "input1"); // second input1 is your map's object variable NOT your input selector. 

Время отправления вашей подтвержденной формы:

$('your_submit_btn_ID').on('click anyOtherEvent', function() { 
    var temp = true; 
    for (var key in your_form_map) { // looping through your map object and make sure all inputs are true. 
     if (!your_form_map[key]) { 
      alert(key + "is invalid"); 
      return false; 
     } 
    } 
    // submit your form here ... 
    $.ajax({...}); 
    // have fun here... 
});