2013-11-28 110 views
0

我有這種形式,它包含三個選擇框,一個爲一天,一個爲一個月和一個爲一年,並且已經嘗試了相當一段時間,現在正確驗證它。JQuery <select>同時驗證多個<select>

我有增加了一個類的<select>的父母,這樣一個綠點出現在側,以表明它是有效的方法。

現在,只要用戶僅輸入年份或月份,類「有效」設置爲即使其他領域的一個設置爲null父。

另一個問題,我有我做的東西,在中途遇到的是出生的日期是不需要驗證的形式,但如果用戶希望進入他的出生日期,他可以這樣做。

因此,我試圖實現的是僅在用戶輸入三個<select>中的至少一個時纔開始對<select>進行驗證,並且如果用戶什麼都不輸入,表單仍將被驗證。

這是我想出了迄今爲止代碼:

jQuery.validator.addMethod('selectcheck', function (value) { 
    return (value != 'null'); 
}, "value required"); 

$("#registrationform").validate({ 
    rules: { 
     dayofbirth:{selectcheck:true,}, 
     monthofbirth:{selectcheck:true,}, 
     yearofbirth:{selectcheck:true,} 
    } 
    highlight: function (element) { 
     $(element).parent().addClass('error').removeClass('valid').closest('.form-group').addClass('error').removeClass('valid'); 
    }, 
    unhighlight: function (element) { 
     $(element).parent().addClass('valid').removeClass('error').closest('.form-group').addClass('valid').removeClass('error'); 
    } 
}); 

我沒加的錯誤消息和其他類似的東西,因爲我這是相當irrellevant的問題。

編輯:我改變了代碼以便日期不會調用selectcheck方法,因爲我現在用這種方法只對一些其他複選框。現在我試圖想出一個只驗證日期的新方法。

+0

您描述的設置沒有清楚地解釋哪部分是壞的。你的'selectcheck'方法完全沒有必要......這與'required'規則完全相同。最後,顯示相應的HTML標記! – Sparky

回答

1

我不完全確定爲什麼您爲簡單的required規則可以完成的操作創建自定義方法。

如果你的HTML看起來像這樣,在第一option包含value="" ...

<select name="month" class="date"> 
    <option value="">please select month...</option> 
    <option value="1">January</option> 
    <option value="2">February</option> 
    .... 
</select> 

,那麼你可以使用這個...

$(document).ready(function() { 

    $('#myform').validate({ 
     rules: { 
      month: { 
       required: true 
      } 
     } 
    }); 

}); 

DEMO:http://jsfiddle.net/KE9SU/


或者,如果要驗證它們是否爲組,則可以使用the additional-methods.js file中包含的require_from_group方法。

$(document).ready(function() { 

    $('#myform').validate({ 
     rules: { 
      month: { 
       require_from_group: [3, '.date'] 
      }, 
      day: { 
       require_from_group: [3, '.date'] 
      }, 
      year: { 
       require_from_group: [3, '.date'] 
      } 
     }, 
     groups: { 
      dateGroup: 'month day year' 
     } 
    }); 

}); 

DEMO:http://jsfiddle.net/KE9SU/1/

現在使用正確的規則,它應該是更容易爲你自動瞄準和樣式的錯誤元素。

+0

非常感謝先生,儘管我經歷了漫長的路途,但我確實設法找到了解決方法。不幸的是,我已經提交了我的任務的最終副本,用我的方式,在那裏我創建了一個驗證Dob組的方法,因爲我有不止一個,它通過ID獲取元素並檢查是否設置了相應的日期,月份或年份爲空。還是非常感謝tho下次我一定會用你的方式:) – mikkuslice

相關問題