2016-01-20 60 views
1

我正在製作一個類似嚮導的網頁表單,分成多個fieldset。因此,inputrequired屬性在您到達提交完整表單的最後一張幻燈片之前不起作用。但是,由於只顯示當前的fieldset,因此如果您在以前的fieldset中忘記填寫required,則不會收到警報。單選按鈕值不爲空

這就是爲什麼我想要實現一些jQuery的一個檢查input具有屬性required的價值,所以用戶不必8頁結束,並試圖提交表單,不知道他/她忘記填寫第012頁的required

我遇到的問題是輸入爲radio。我知道我只需要將一個required添加到整個列表中,這個屬性可以在HTML中工作,但是由於我的jQuery檢查的值是[required],所以選擇哪個單選按鈕並不重要,該值始終是一個我加了需要。

JSFIDDLE

下面是一些HTML

<div class="description"> 
    Pladstype: 
</div> 
<div class="descriptionData"> 
    <select id="form_billet_pladstype" required> 
     <option value="" disabled selected>Vælg pladstype</option> 
     <option value="0">Ståpladser</option> 
     <option value="1">Siddepladser</option> 
     <option value="2">Sidde- og ståpladser</option> 
    </select> 
</div> 

<div class="description"> 
    Nummererede pladser: 
</div> 
<div class="descriptionData"> 
    <div class="descriptionData"> 
     <input required type="radio" value="ja" name="form_billet_nummererede" id="form_billet_nummererede_ja" class="descriptionData janej valid"><label for="form_billet_nummererede_ja">Ja</label> 
     <input type="radio" value="nej" name="form_billet_nummererede" id="form_billet_nummererede_nej" class="descriptionData janej valid"><label for="form_billet_nummererede_nej">Nej</label> 
    </div> 
</div> 

<div class="description"> 
    Billet-nr.: 
</div> 
<div class="descriptionData"> 
    <select name="form_ticketType" id="form_ticketType" required> 
     <option value="" disabled selected>Vælg billetnr.</option> 
     <option value="0">Type 0 - Unummereret plads</option> 
     <option value="14">Type 14 - Unummererede m. niveau, række og plads</option> 
     <option value="15">Type 15 - Alle felter</option> 
    </select> 
</div/> 

jQuery的

var requiredFields = $(element).find('#' + stepName + ' [required]') 
requiredFields.each(function(idx, elem) { 
    var val = $(elem).val(); 
    alert(val); 
}); 

我現在明白了,寫這個問題後,對於該radio的值總是一個我已經添加了required,但我該如何解決這個問題,因此當頁面加載時它的值實際上爲null,並且在選擇其中一個選項時剛剛得到值checked(或實際值,但不是必需的)?

簡單的出路是在加載時選擇一個盒子,然後他可以選擇另一個盒子,但是我想知道是否可以從無線電輸入的空值開始,但仍然使用required

+0

應的空間是id'之間''[需要]''在 '#' + stepName + '[需要]''? – guest271314

+0

是的,因爲它需要從當前可見的fieldset中獲得所有'[required]'(以'#'+ stepName'爲目標) – Rvervuurt

+0

不正確的解釋要求嗎?當選擇'option'時,將'input required'設置爲'true'? – guest271314

回答

-1
var requiredFields = $(element).find('#' + stepName + ':required') 

這將是您的解決方案。

+0

''[required]'或':required'基本上是一樣的。檢查我更新的小提琴:https://jsfiddle.net/mepLaorr/2/ – Rvervuurt

0

我已通過添加一個額外的隱藏radio按鈕解決了該問題。這個單選按鈕具有屬性required,所以如果既沒有選擇是或否,HTML仍然將這些單選按鈕看作空的。

由於隱藏的單選按鈕的值是null,將檢查值是否爲空的代碼將註冊爲空。

我已經添加了幾行jQuery,它從隱藏的單選按鈕中刪除required並將其添加到選定的一個,所以我實際上獲取了所選的值(即使這並不是真的必要,只知道選擇了一件就夠了)。

$('#form_billet_nummererede_ja').bind('click', function(e) { 
    $('#form_billet_nummererede_hidden').removeAttr('required'); 
    $('#form_billet_nummererede_ja').attr('required', true); 
}) 

$('#form_billet_nummererede_nej').bind('click', function(e) { 
    $('#form_billet_nummererede_hidden').removeAttr('required'); 
    $('#form_billet_nummererede_nej').attr('required', true); 
}) 

Updated fiddle.