檢查如果表單輸入是空的jQuery

還有一些其他線程問這個問題，但我想我覺得我有一個稍微不同的問題。檢查如果表單輸入是空的jQuery

我想提出一個窗體，其中提交按鈕最初是禁用的，當窗體完成時，按鈕將變爲啓用狀態。掙扎了一會兒後，我發現後，我仿照下面的代碼：

$('input, textarea, select').blur(function() 
{ 
    if(!$(this).val()) { 
    $('#submit').removeAttr('disabled'); 
    } 
});

我很快意識到，這是不打算在此代碼，因爲工作，「這」僅僅是指輸入標籤你剛剛離開，而不是一次輸入所有的標籤。我怎樣才能一次引用所有的input，select和textarea標籤以檢查它們是否都是空的？

另外，我製作表格的方式並不是所有的輸入框都立即顯示出來。有些輸入不適用於對某個問題回答「否」的人，因此我使用jQuery幻燈片來擺脫它們。最初，這些標籤沒有顯示。我是否需要修改這個jquery函數來檢查這些輸入是否爲空？

來源

2011-09-04 Joseph

看到我的回答，約瑟夫。您正在部署簡單的設置，而不是全面的設置。你可能會更好地服務，只是做一個真正的驗證，而不是一個簡單的，全面的。 –

只需通過你要檢查所有元素的循環：

$('input, textarea, select').blur(function() { 
    var valid = true; 
    $('input, textarea, select').each(function() { 
    if (!$(this).is(':visible')) return true; // check if element is displayed 
    if(!$(this).val()) { 
     valid = false; 
     return false; // form is not valid so no need to go any further 
    } 
    }); 

    if (valid) { 
    $('#submit').removeAttr('disabled'); 
    } 
});

編輯

關於你的隱藏輸入字段。

添加額外的檢查以查看元素是否可見。

請記住也要經常檢查服務器端！

來源

2011-09-04 19:33:47 PeeHaa

服務器端警告+1。我個人更關注服務器端，如果需要或者除了需要請求客戶端。 –

@Jared Farrish：我的回答怎麼沒有+1呢？ ;）那麼你應該在服務器端完成這一切，但是在客戶端執行這一操作也更方便用戶。 – PeeHaa

也許出於同樣的原因，你還沒有upvoted我的答案......：啊，什麼地獄。 –

$('input, textarea, select').blur(function(){ 
    checkSubmit(); 
}); 

function checkSubmit() { 
    var $vals = $('input:not([type="submit"]), textarea, select'); 
    var $total = $vals.size(); 
    var $count = 0; 
    $vals.each(function(){ 
     if(!$this).val()) { 
      $count++; 
     } 
    }); 
    if ($total === $count) { 
     $('#submit').removeAttr('disabled'); 
    } 
}

閱讀您的編輯，以及，我想你會想先走一步，做提交，而不是像這樣一個驗證設置，這將是潛在的不僅僅是驗證領域更加困難。要回答你的最後一個問題，是的，你需要調整查詢（注意我對input[type="submit"]的調整）。

來源

2011-09-04 19:36:30

@Joseph - 看到這個答案我寫了一個更全面的方法：http://stackoverflow.com/questions/7059441/registration-form-validation/7071749#7071749 –

第一個選擇器，'input，textarea，select'與['：input']（http://api.jquery.com/input-selector/）相同。 '[type =「submit」]'與'：submit'部分相同，所以第二個選擇器可以替換爲'：input：not（：submit）' – shesek

好的，謝謝指針。 :) –

IMO的一種非常優雅的方式是使用一個自定義的僞選擇器來查找空元素。首先，使用添加：

$.expr[':'].novalue = function(a) { return $(a).val().length === 0; };

比，當你需要測試，如果所有的輸入都是非空（可能在$(':input').blur(...)），

if ($(':input:novalue', form_element).length === 0) { 
    // All the inputs has a value 
    $('#submit').removeAttr('disabled'); 
} else { 
    // Some of the inputs are empty 
}

（form_element作爲...好，<form>元）

來源

2011-09-04 19:46:41 shesek

檢查如果表單輸入是空的jQuery

回答

相關問題