在jQuery .show（）調用上彈出HTML5表單驗證錯誤

我正在創建一個多頁HTML5表單。表單的每個「頁面」都在一個DIV中，當單擊適當的BUTTON元素時，該DIV隱藏/顯示爲jQuery .hide（）或.show（）調用。在jQuery .show（）調用上彈出HTML5表單驗證錯誤

問題是：當顯示後續頁面時，驗證檢查似乎被自動調用，並且在用戶有機會做任何事情之前立即在必填字段中彈出錯誤消息。是否意外觸發了表單驗證調用？

簡單的例子：

<div class="page" id="page_1" style="display:block;"> 
    <input type="text" name="first_name" required> 
    <button onclick="$('#page_1').hide(); $('#page_2').show();">Next</button> 
</div> 

<div class="page" id="page_2" style="display:none;"> 
    <input type="text" name="last_name" required> 
</div>

在隱藏頁面1和頁面示出圖2中，驗證錯誤第2頁立即在第一必填字段彈出。有任何想法嗎？

來源

2013-12-09 ekstasis16

是的，所有在相同的形式。但是，只有在表單提交時才應該調用驗證？我還沒有提交表格。 – ekstasis16

-1

將checkValidity功能置於所有輸入標籤上。我最近做了。

   function nextDiv(){ 
       var a = document.getElementById('ONE').checkValidity(); 
       var b = document.getElementById('TWO').checkValidity(); 
       var c = document.getElementById('THREE').checkValidity(); 
       var d = document.getElementById('FOUR').checkValidity(); 
       var e = document.getElementById('FIVE').checkValidity(); 
       var f = document.getElementById('SIX').checkValidity(); 
       var g = document.getElementById('SIX').value; 
       er = document.getElementById("ERROR"); 
       var email = document.getElementById('ONE').value; 
       var ec = checkEmail(email); 
       var cp = checkPassword(); 
       if(a == 1 && b == 1 && c == 1 && d == 1 && e == 1 && f == 1 && g!=0 && ec == 'true' && cp ==1){ 
        $("#div_1").slideLeftHide(); 
        $("#div_2").delay(1100).slideRightShow(); 
        er.style.visibility = "hidden"; 
       }else{ 
        er.style.visibility = "visible"; 
       } 
      }

這將返回布爾值，並檢查使用JavaScript if else。它不會顯示驗證彈出窗口，但是如果您將放置所需的標籤和圖案。比用戶將看到的錯誤

來源

2013-12-09 05:36:16

這只是一個例子。跟着它。 –

在jQuery .show（）調用上彈出HTML5表單驗證錯誤

回答

相關問題