如何檢測表單是空白或不是由jQuery

Question

我在我的頁面中有多個表單。一些表單/字段是必需的（類名稱requiredForm），有些則不是。最後一個名爲「Next」的鏈接。默認情況下，「Next」處於灰色背景（取消激活背景色）。我希望人們只填寫必填字段/表單時，「下一步」的背景將更改爲橙色。如果他們沒有填寫需求字段/表單，則「下一步」鏈接將保持原樣。基本上，表單中包含約9-10個單選按鈕和一個包含約14-15個複選框的表單。我不需要人們檢查/點擊所有這些。我需要如果人們點擊/或只選擇一個，禁用（灰色）鏈接轉爲橙色。所以，如果我檢查，如果所需表格是空白的，灰色鏈接就是這樣，它可能會更靈活。如果所需表格不爲空白，灰色按鈕將變成橙色。我正在嘗試寫這個函數。但是，我不太瞭解jQuery。這就是爲什麼，我無法理解當人們填寫表單時jQuery如何理解。

下面是示例代碼的形式在我的網頁存在：

<div class="row"> 
    <form class="myForm requiredForm"> 
     <input type="radio" id="lb1" name="radio" /> 
     <input type="radio" id="lb2" name="radio2" /> 
     <input type="radio" id="lb2" name="radio3" /> 
    </form> 
</div> 
<div class="row"> 
    <p>many Texts</p> 
</div> 
<div class="row"> 
    <form class="myForm"> 
     <input type="text" id="name" name="name" /> 
     <input type="text" id="email" name="email" /> 
    </form>" 
</div> 
<div class="row"> 
    <form class="myForm requiredForm"> 
     <input type="checkbox" />  
     <input type="checkbox" /> 
     <input type="checkbox" /> 
</div> 
<a href="#" class="deactive">Next</a> 

CSS：

.next { 
    background: #fa9a37; // orange link color 
    color: #fff; 
} 
.deactive { 
    background: #fafafa; // grey link color 
    color: #333; 
} 

的jQuery：

$(document).ready(function() { 


    $('.deactive').addClass('.next'); // if people fill up the required forms 
    $('.deactive').removeClass('.next'); // if people don't fill up the required forms 
} 

Answer 1

請加required類是所有需要的字段。

，並嘗試將此代碼

<div class="row"> 
    <form class="myForm requiredForm"> 
     <input type="radio" class="required" id="lb1" name="radio" /> 
     <input type="radio" class="required" class="required" id="lb2" name="radio2" /> 
     <input type="radio" class="required" id="lb2" name="radio3" /> 
    </form> 
</div> 
<div class="row"> 
    <p>many Texts</p> 
</div> 
<div class="row"> 
    <form class="myForm"> 
     <input type="text" class="required" id="name" name="name" /> 
     <input type="text" class="required" id="email" name="email" /> 
    </form> 
</div> 
<div class="row"> 
    <form class="myForm requiredForm"> 
     <input class="required" type="checkbox" />  
     <input class="required" type="checkbox" /> 
     <input class="required" type="checkbox" /> 
</div> 
<a href="#" id="next_link" class="deactive">Next</a> 

/*限定可變的每個，在像複選框和單選按鈕*租賃一個所選擇的元件/ VAR is_radio_checked = FALSE; var is_checkbox_checked = false; var is_other_required_field = true;

$('.required').each(function(){ 
    var type = $(this).attr('type'); 
    if((type == 'radio') && !is_radio_checked){ 
    is_radio_checked = $(this).is(':checked'); 
    } else if((type == 'checkbox') && !is_checkbox_checked){ 
    is_checkbox_checked = $(this).is(':checked'); 
    } else if((type == 'text') && is_other_required_field){ 
    var txt_val = $(this).val(); 
    if(txt_val == ""){ 
     is_other_required_field = false; 
    } 
    }  
}); 

if(is_radio_checked && is_checkbox_checked && is_other_required_field){ 
    $("#next_link").removeClass('deactive').addClass('next'); 
} 

請對圖像的外觀

Answer 2

解決的辦法之一是聽改變輸入元素：

$('input').change(function() { 
    var conditions = checkForConditions(); // this is where you check if the mandatory inputs are filled in 
    if (conditions) 
     $('.deactive').addClass('next'); 
    else 
     $('.deactive').removeClass('next'); 
}); 

我已經創建了一個基於切換這裏的一個小例子：http://jsfiddle.net/5c44z/

你有兩個主要錯誤：

• .addClass('.next')應該是.addClass('next') - 沒有點必要的，因爲我們知道這是一類
• 在你的CSS中，下一個類是在deactive類之前定義的，所以deactive規則總是會覆蓋下一個規則......你可以通過改變順序或者通過切換類來解決這個問題（所以你不能在同時）

---

和健康檢查功能可以是這樣的，假設你把一個類mandatory每個必填字段：

function checkForConditions() { 
    var ret = true; 
    $('.mandatory').each(function() { 
     if (!$(this).val()) { 
      ret = false; 
     } 
    }); 
    return ret; 
} 

下面是與一個例子（前輸入字段是強制性的） ：http://jsfiddle.net/5c44z/1/

Answer 3

您可以使用適當的客戶端驗證庫（即：jQuery驗證程序）或對您的問題的快速和骯髒的答案：

$(".deactivate").on('click', function() { 
    if !($('input').is(':checked')) { 
     console.log("checkboxes and radios are unchecked"); 
    } 
    if (($("#name").val() == "") && ($("#name").val() == "")) { 
     console.log("textboxes are empty"); 
    } 
}); 

注意 Shomz答案涉及每次輸入更改發射一個事件。這使得多一點的意義在效率方面..

Answer 4

你可以把所有的只是一個form標籤下，給予必要的領域一類，說required然後

var allDone = true; 
    $(".myForm input.required").each(function() { 
    if($(this).val() === "") { 
     allDone = false; 
     return false; 
    } 
    }); 
    if (allDone) 
    $('.deactive').addClass('next'); 
    else 
    $('.deactive').removeClass('next');