Обнаружение попытки подачи недопустимой формы html5

Question

При использовании HTML5 form validation, наличие недопустимого значения ввода в форме прекратит подачу этой формы. Как я могу обнаружить, что пользователь попытался отправить сообщение об ошибке? Обработчик формы onsubmit не срабатывает, когда отправка приостановлена ​​сбой проверки.

В данный момент я слушаю keypress и click событий на кнопку отправки, чтобы обнаружить попытки отправки. Есть ли лучший способ обнаружения неудачной подачи формы?

Answer 1

Простой способ обойти это - добавить слушателя событий к каждому входу в форме, чтобы увидеть, когда ему было запрещено отправлять. Событие «недействительное» должно делать все, что вам нужно.

Пример

Array.prototype.slice.call(document.querySelectorAll("[required]")).forEach(function(input){ 
       input.addEventListener('invalid',function(e){ 
        //Your input is invalid!  
       }) 
      }); 

Подробнее здесь http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

Answer 2

Попробуйте это, где-то

   var myForm = document.forms[0];var myFormElements = myForm.elements; 
       for(var i in myFormElements){ 
        var element = myFormElements[i]; 
        if(!element.willValidate){ 
         continue; 
        } 
        element.addEventListener('invalid',function(e){ 
         //Your input is invalid! 
         myForm.classList.add('validated'); 
        }); 
       } 

Answer 3

Я предлагаю вам использовать noValidate недвижимость. Вы можете отключить проверку по умолчанию, и запустить его вручную в пределах onsubmit метода

var form = document.getElementById("myForm"); 
form.noValidate = true; // turn off default validation 

form.onsubmit = function(e) { 
    e.preventDefault(); // preventing default behaviour 
    this.reportValidity(); // run native validation manually 

    // runs default behaviour (submitting) in case of validation success 
    if (this.checkValidity()) return form.submit(); 

    alert('invalid'); // your code goes here 
} 

вы можете проверить его здесь: https://jsfiddle.net/titulus_desiderio/Laon29f3/