Как запретить отправку формы, если пользователь удалил поле с помощью элемента inspect

Question

Я хочу запретить отправку формы, если пользователь намеренно удаляет поле с помощью элемента inspect. В настоящее время я использую пользовательскую проверку, используя jquery.

Answer 1

Вы можете получить каждое поле формы по идентификатору или любым способом и сопоставить с формой перед отправкой. Вот документация: https://api.jquery.com/event.preventdefault/

Но правильным способом будет проверка данных формы на сервере. Форма проверки в FrontEnd должна быть только для проверки типа данных или тривиальных вещей. Реальность такова, что если пользователь настолько умен, чтобы изменить веб-документ, проверка формы HTML бесполезна.

Answer 2

Единственный безопасный способ справиться с проверкой - это сделать это и в бэкэнде, а не только во внешнем интерфейсе, как уже упоминалось в комментариях, пользователи все еще могут обмануть ваш код внешнего интерфейса для отправки формы, в любом случае здесь есть способ предотвратить форму Передача, если элемент был удален, я использую MutationObserver для наблюдения за любыми изменениями в дочернем элементе тега <ul> и использую флаг для предотвращения отправки формы, обратите внимание, что после 4 запускается таймер Во-вторых, чтобы удалить элемент, вы можете отправить форму до 4-го второго окна:

var submitFlag = 1;

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        if(mutation.removedNodes.length) { // ADD YOUR CONDITION HERE FOR FORM ELEMENTS
          submitFlag = 0;  
        }

        break;
    }
  });
}



var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omit or set to false to observe only changes to the parent node.
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

setTimeout(function(){
  document.getElementById('el2').remove();
}, 4000);

function submitHandler(event) {
  if(submitFlag === 1) {
    console.log('submitted');
  }
  else {
    event.preventDefault();
    console.log("can't submit");
  }
}

<div id="someElement">
  <ul>
    <li> element 1 </li>
    <li id="el2"> element 2 </li>
    <li> element 3 </li>
    <li> element 4 </li>
  </ul>
</div>

<form onsubmit="submitHandler(event)">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>