檢測嘗試提交無效html5表格

使用HTML5 form validation時，表單中輸入值無效將暫停提交該表單。我如何檢測到用戶嘗試表單提交失敗？當提交被驗證失敗暫停時，表單的onsubmit處理程序不會觸發。檢測嘗試提交無效html5表格

我當前正在偵聽提交按鈕上的keypress和click事件以檢測提交嘗試。有沒有更好的方式來檢測失敗的表單提交？

來源

2013-06-25 wheresrhys

一樣的onsubmit，然後就返回false，如果有一個無效項？ – oooyaya

你有任何瀏覽器限制？ IE10在HTML5驗證方面表現不俗，但舊版本稍有欠缺。 –

想oninvalid？ O.o？ –

解決此問題的一種簡單方法是向表單中的每個輸入添加一個事件偵聽器，以查看它何時被阻止提交。 '無效'事件應該做你需要的一切。

例

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/

來源

2015-01-28 08:43:27 stwilz

更多信息嘗試了這一點，地方

   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'); 
        }); 
       }

來源

2015-02-17 19:23:28 httpete

我建議你使用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/

來源

2018-02-05 15:52:47 Titulus

檢測嘗試提交無效html5表格

回答

相關問題