2010-02-24 175 views
7

我已經使用jQuery Validation插件將表單放在一起,並且所有輸入都可以正常工作驗證和錯誤消息 - 複選框除外。我有兩個複選框問題。jQuery驗證插件:複選框組和錯誤消息問題

第一個是驗證插件API似乎無法處理分組上下文中的複選框(我正在使用字段集進行分組)。在這裏發現了幾個解決問題的方法,包括參考Rebecca Murphey針對使用自定義方法和類的更一般情況的a post。適應這種情況:

jQuery.validator.addMethod('required_group', function(val, el) { 
     var fieldParent = $(el).closest('fieldset'); 
     return fieldParent.find('.required_group:checked').length; 
}); 

jQuery.validator.addClassRules('required_group', { 
     'required_group': true 
}); 

jQuery.validator.messages.required_group = 'Please check at least one box.'; 

這種工作,但在每個複選框上產生錯誤消息,並且只在每個框被單擊時刪除它們。這對於用戶來說不是一個可以接受的情況,只能通過點擊誤報來擺脫它們。理想情況下,我猜想需要的是在顯示之前防止或消除額外的消息,並使用errorPlacement在父字段集中顯示單個錯誤消息,然後單擊任何複選框將其刪除。理想情況下,可能它們都會顯示,但事件處理程序可以通過單擊關閉全部冗餘消息,這就是tvanfosson提供的this approach似乎要做的事情。 (另一種定製方法here,但我無法讓它工作。)我想我也應該注意到這種形式要求複選框有不同的名稱。

我的第二個問題是,與在複選框形式的字段集之一還包含複選框的外複選框中的一個下一個嵌套字段集。因此,除了第一級單箱檢查要求之外,如果選中包含第二級複選框的特定複選框,則必須至少檢查一個第二級箱子。不確定正確的方法;我猜需要發生什麼(按照上面的方案)是觸發器複選框將使用toggleClass將'required_group'類添加/刪除到子字段中的所有複選框,然後(希望)將與父代相同字段:

$("#triggerCheckbox").click(function() { 
    $(this).find(":checkbox").toggleClass("required_group"); 
}); 

任何建議或想法的歡迎。我遠遠超出了我在這一方面有限的jQuery技能,很高興聽到我錯過了簡單,優雅和/或顯而易見的方法來做到這一點!

+0

你有沒有找到解決方法呢?我面臨着同樣的問題,文件上傳輸入,而不是您的複選框。乾杯。 – Nicolas 2010-06-16 08:09:56

+0

您的問題陷入困境。這會幫助你嗎? http://stackoverflow.com/questions/1300994/jquery-validate-require-at-least-one-field-in-a-group-to-be-filled – 2011-08-17 17:33:08

回答

2

我已經處理了之前類似的問題,但在我的特定情況下,我認爲我有比你更容易 - 我有複選框的羣體,但需要沒有別的形式驗證。

這裏的總體思路,這可以解決您的「每一個複選框錯誤」的問題:

//for each fieldset, attach a new rule to the first checkbox 
$('fieldset input[type="checkbox"]:first').each(function(i,v){ 
    $(v).rules('add', { 
     required: "fieldset input[type="checkbox"]:unchecked" 
    }); 
}); 

爲了做一些理智與驗證錯誤,實現自己的showErrors功能。這裏是我的情況簡單可能不會幫助你很多 - 我不必擔心錯誤是否在複選框組中,在我的表單中,如果有錯誤,它們將是相同的問題 - 每個fieldset至少有一個複選框未被選中。對於你,我認爲你將不得不深入驗證插件的defaultShowErrors函數(在源代碼中),看看如何處理errorMap和errorList。

$('#myForm').validate({ 
    ... 
    showErrors: function(map,list){ 
     if (this.numberofInvalids()){ 
      $('#form_errors').html('You much choose at least one Checkbox per group'); 
     } else { 
      this.defaultShowErrors(); 
     } 
    } 
}); 

對於你的問題的第二部分,我想一個'依賴'的規則是你在找什麼。因此無需實際添加類,只是有子組的規則是依賴於被檢查父複選框(見規則方法文檔近乎完美的例子)。

+0

是的,我確實解決了我的問題,在創建特殊的errorPlacement和我強迫用戶填寫前兩個字段。如果他不這樣做,那麼我使用我的errorPlacement來處理這兩種情況(但是errorPlacment是另一個特定於我的文件上傳輸入的問題)。乾杯。 – Nicolas 2010-06-18 10:12:53