Jquery分段驗證只能在最初工作

Question

我設置的是一個有兩個主要部分的大表單。用戶填寫一些基本信息的第一部分。第二部分用戶添加了一些'尺寸'選項，其中可能有多個。尺寸信息填寫在面板中，然後「保存」，在其他地方克隆表格，然後擦拭面板以增加其他尺寸。當這個「保存」發生時，我只對錶單的那一部分進行驗證。

$.validator.addMethod("pageRequired", function(value, element) { 
     if (valid_distributions > 0) { 
      $('#distributor-select').prop('required', false) 
     } 
     if (current_page == 1) { 
      return this.optional(element); 
     }else if (current_page == 2) { 
      return !this.optional(element); 
     } else { 
     return "dependency-mismatch"; 
     } 
    }, $.validator.messages.required) 

這個塊是切換窗體前半部分的需求。基本上，我遇到了一些不好的行爲，有時我可以驗證表單的底部，但是當保存底部時，會告訴Jquery驗證整個表單。

我知道我的條件是需要或不需要的元素是射擊，但仍然需要。

var v = $("#beer-create-form").validate({ 
     debug: true, 
     rules: { 
       'keg_sizes[]': { 
         required: true 
       } 
     }, 
     messages: { 
      'keg_sizes[]': 'Choose at least one keg size' 
     }, 

     errorClass: "error", 
     errorPlacement: function (error, element) { 
      if (element.hasClass('kegsize-toggle')){ 
       error.insertAfter(element.parents().find('.distributor-name')); 
      }else if (element.hasClass('price')) { 
       console.log('price'); 
      } 
     }, 
     highlight: function(element, errorClass) { 
      $(element).addClass(errorClass); 
     }, 
     unhighlight: function(element, errorClass) { 
      $(element).removeClass(errorClass); 
     } 
    }); 

    $(document).on('click', '.save-listing', function(e) { 
     current_page = 1; 
     if (v.form()) {    // if the form is valid, proceed to: 
      saveBeerPanel();  //clones the panel being filled out with all the info 
      wipeBeerPanel();  // clears all the info previously filled out so a new listing can be added 
      valid_distributions += 1 // keeps track that there is at least one valid distribution 
     } 
     e.preventDefault(); 
    }); 

我試圖與此代碼更改 '需要' 開關：

if (current_page == 1) { 
     console.log('top is optional'); 
     return $(element).prop('required', false) 
    }else if (current_page == 2) { 
     return $(element).prop('required', true) 
    } else { 
    return "dependency-mismatch"; 
    } 

...但是，這似乎並沒有幫助。

爲什麼這些元素沒有被更改爲可選或不可選？

工作撥弄演示的形式應該是如何工作的： http://jsfiddle.net/hodale/0c41465t/

而且，這裏是我用靈感演示： http://jsfiddle.net/hodale/aqpyykt0/

Answer 1

爲什麼這些元素不被更改爲可選或不？

因爲.addMethod()和this.optional(element)不應該改變任何東西。

The .addMethod() method僅用於創建/評估新的自定義規則。

而this.optional(element)內的.addMethod()方法僅用於幫助確定是否應該由此自定義規則忽略空字段。

this.optional(element)只有當元素 「需要」

---

的元素是 「不需要」

false返回boolean ......

• true用創建的"pageRequired"方法的全部前提210沒有意義，應該刪除。

  要在特定元素上切換required規則，您可以執行以下操作之一...

  1. 在元素上切換required類。

  2. 切換HTML 5屬性required="required"。

  3. 設置和刪除利用the .rules() method的required規則...

     $('#myfield').rules('add', { // add rules 
         required: true 
     }); 
     
     $('#myfield').rules('remove', 'required'); // remove rules 
     

     如果您一次選擇多個字段，你必須使用一個jQuery .each() ....

     $('.myfields').each(function() { // add rules to multiple field at once 
         $(this).rules('add', { 
          required: true 
         }); 
     }); 
     

  我建議你閱讀文檔：jqueryvalidation.org