jQuery驗證，但僅後首次提交

我使用的是非常漂亮的bassistance驗證插件爲我所有的表單驗證需要： http://bassistance.de/jquery-plugins/jquery-plugin-validation/jQuery驗證，但僅後首次提交

我遇到一個問題：錯誤信息立即出現，用戶也沒有，即使完成了一個領域。因此：直到用戶完成打字纔會顯示無效的電子郵件。

在文檔here，一種解決方案是將選項設置onkeyup到false導致錯誤消息只出現的onblur。

然而，在我的設置，我遇到的另外兩個問題（而不是由上面的解決方案解決）

在提交無效的形式，錯誤信息不會被清除糾正他們
當時使用瀏覽器自動填充功能，自動填寫字段保持標記爲錯誤。

所以，我的第一個問題是：我怎麼才能使Bassistance驗證火災後才第一次提交，並從它的默認設置從那裏出來？

這裏是我的代碼：

if($('#contact_form').length) { 
    $("#contact_form").validate({ 
     rules: { 
      first_name: { 
       required: true 
      }, 
      last_name: { 
       required: true 
      }, 
      message: { 
       required: true 
      }, 
      telephone: { 
       required: true 
      },    
      email: { 
       required: true, 
       email: true 
      }, 
      email_again: { 
       required: true, 
       email: true, 
       equalTo: "#email" 
      }, 
      norobot: { 
       required:true, 
       minlength:4, 
       maxlength:4, 
       number:true  
      } 
     } 
    }); 
}

請在這裏找到完整的JavaScript：http://lad.chocolata.be/js/main.js

這裏是一個工作示例與臭蟲以onkeyup設置爲false： http://lad.chocolata.be/nl/contact

提交表格後帶有一些無效字段時，錯誤消息在糾正錯誤時不會清除。

我錯過了什麼？

來源

2013-01-18 maartenmachiels

請在原始信息中包含您的代碼，以便我們重新打開。 – Sparky

嗨，我謙虛地不同意我的問題的結束。代碼太大，無法在此完整發布，這就是爲什麼我已經包含這兩個示例的鏈接。我試圖在JSFiddle中重現這種行爲，但不能。我猜測我的一些腳本之間有衝突。你可以看看提供的鏈接嗎？嘗試提交表單而不填寫任何內容，然後更正字段：您將看到錯誤未被清除。同時，我將把這個問題重寫得更加清楚。 – maartenmachiels

這個網站的全部想法還包括幫助未來的讀者，這些讀者在外部鏈接失效時不會發生。你可以做的任何事情來創建一個簡潔的例子將有助於重新打開它。即使只是簡單地把我的簡單的jsFiddle和分裂成你的兩個案例會更好。 – Sparky

報價OP：「所以，簡單明瞭，我的問題是：如何才能讓Bassistance確認火災後，才第一次提交，並用它從那裏出來默認設置」

警告讀者：通常情況下，一個會叫.validate()一次在DOM準備初始化形式。下面的代碼只會調用.validate()一次當提交按鈕被初始按下時...因此，將會有沒有驗證，直到第一次按下該按鈕。

不需要多次撥打.validate()，所以我用了jQuery one() event。

$(document).ready(function() { 

    $('#submit').one('click', function() { 
     $('#myform').validate({ 
      // your rules & options 
     }); 
    }); 

});

工作演示：

http://jsfiddle.net/hSDyP/

來源

2013-01-19 17:05:07 Sparky

優秀的答案，Sparky。一個問題：我嘗試點擊提交按鈕，並嘗試按下輸入：這兩種情況都起作用。我們是否有覆蓋所有可能的情況？或者，使用事件處理程序onsubmit會更好嗎？ – maartenmachiels

@maartenmachiels，假設啓用了JS，那麼我會說「是」，你被覆蓋了。我會避免使用'submit'事件的任何事情，因爲這已經由插件自己的'submitHandler'處理過了。換句話說，你現在還沒有真正「提交」，所以沒有理由使用這個事件。 – Sparky

勝利者需要一切:-)感謝您的出色貢獻。非常感激！ – maartenmachiels

-1

我寫了一個通用的解決方案，以避免應用valitation直到第一次提交發生。只需使用此代碼，包括你的腳本後「jquery.validate.js」：

(function($){ 

var _validate = $.fn.validate; 

$.fn.validate = function(){ 
    var result, args = Array.prototype.slice.apply(arguments); 
    this.each(function(){ 
     var $this = $(this), 
      lazyValidate = $this.data('lazy-validate'); 
     // Lazy validation has been initialized: just delegate 
     if(lazyValidate === true){ 
      result = _validate.apply($this, args); 
      return; 
     } 
     // Init, if not yet 
     if(!lazyValidate){ 
      // Create Lazy Form 
      lazyValidate = $('<form />')[0]; 
      $this.data('lazy-validate', lazyValidate); 
      // Add One-Time submit handlder 
      $this.one('submit.lazy-validate', function(){ 
       var $this = $(this); 
       // Apply validation options now 
       _validate.call($this, $(lazyValidate).data('validator').settings); 
       // Mark lazy validation has initialized 
       $this.data('lazy-validate', true); 
       // Test Valid 
       return $this.valid(); 
      }); 
     } 
     // Apply Method to Lazy Form 
     result = _validate.apply($(lazyValidate), args); 
    }); 
    return result === undefined ? this : result;   
}; 

})(jQuery);

請記住，如果你使用的字段的方法解決方案是行不通的：規則（），removeAttrs（）。最後，我認爲這個功能應該作爲一個簡單的validate（）選項包含在valation插件中;但在此之前我仍然會使用這個技巧。

來源

2013-02-05 18:09:44 user2301062

這很漂亮，國際海事組織。與接受的答案相比，有什麼優勢？ – Sparky

jQuery驗證，但僅後首次提交

回答

相關問題