在「取消」上驗證字段單擊Onbeforeunload事件JQUERY

我創建了一個函數，在該函數中綁定beforeunload事件，我在頁面第一次加載時調用它。首先，當我點擊「取消」時，beforeunload事件再次觸發並且驗證不起作用。我如何完成這項工作？在「取消」上驗證字段單擊Onbeforeunload事件JQUERY

function closeOrRefreshPageEvents() { 
       // This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page 
       $("#formUpdateInstallations").submit(function (event) { 
        $.validate({ 
         form: '#formUpdateInstallations', 
         validateOnBlur: false, // disable validation when input looses focus 
         errorMessagePosition: 'top', 
         scrollToTopOnError: true, // Set this property to true if you have a long form 
         onError: function() { 
          alert('Validation failed'); 
         }, 
         onSuccess: function() { 
          alert('The form is valid!'); 
         } 
        }); 
        event.preventDefault(); 
       }); 

       $(window).bind('beforeunload', function() { 
        // Check if at least one Installation has been modified 
        var installationsChanged = false; 
        for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) { 
         if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") { 
          installationsChanged = true; 
          break; 
         } 
        } 
        // If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules 
        if (installationsChanged) { 
         setTimeout(function() { 
          setTimeout(function() { 
           $("#formUpdateInstallations").submit(); 
          }, 1000); 
         }, 1); 

         return 'You will loose your changes if you continue!'; 
        } 
       }); 
      }

來源

2014-12-04 Walloud

你可以把它扔在鋼筆或小提琴嗎？這對獲得快速幫助將有很大的幫助。 – Todd 2014-12-04 21:52:38

謝謝託德。但我認爲把所有的邏輯放在小提琴上並不容易：/ – Walloud 2014-12-04 22:19:35

不用擔心，男人。但是我使用codepen編寫整個站點的情況並不少見。大聲笑。 https://stre.am - codepen - >崇高的製表符縮進 - >回購 – Todd 2014-12-04 23:29:18

事實上，我必須將提交事件處理程序中的驗證塊移動到onbeforeunload事件處理程序中。下面是正確的代碼：

function closeOrRefreshPageEvents() { 
      // This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page 
      $("#formUpdateInstallations").submit(function (event) { 
       event.preventDefault(); 
      }); 

      $(window).bind('beforeunload', function() { 
       // Validate fields when user clicks "Cancel" 
       $.validate({ 
        form: '#formUpdateInstallations', 
        validateOnBlur: false, // disable validation when input looses focus 
        errorMessagePosition: 'top', 
        scrollToTopOnError: true, // Set this property to true if you have a long form 
        onError: function() { 
         alert('Validation failed'); 
         window.onbeforeunload = function() { return false; }; 
         window.onbeforeunload = null; 
        }, 
        onSuccess: function() { 
         alert('The form is valid!'); 
         window.onbeforeunload = function() { return false; }; 
         window.onbeforeunload = null; 
        } 
       }); 

       // Check if at least one Installation has been modified 
       var installationsChanged = false; 
       for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) { 
        if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") { 
         installationsChanged = true; 
         break; 
        } 
       } 
       // If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules 
       if (installationsChanged) { 
        setTimeout(function() { 
         setTimeout(function() { 
          window.onbeforeunload = function() { return false; }; 
          $("#formUpdateInstallations").submit(); 
         }, 500); 
        }, 1); 

        return 'You will loose your changes if you continue!'; 
       } 
      }); 
     }

來源

2014-12-05 01:55:33 Walloud

在「取消」上驗證字段單擊Onbeforeunload事件JQUERY

回答

相關問題