檢查是否所有的表單輸入都填充了jquery並且執行某些操作

Question

我想隱藏提交按鈕並僅當我的表單的所有輸入都填入值時才顯示它。

我試試這個，但它不起作用。

<script type="text/javascript"> 
$(document).ready(function() { 

    var $fields = $("#new_account_form :text, :file, :checkbox, select, textarea"); 
    $fields.keyup(function() { 
     var $emptyFields = $fields.filter(function() { 

      // remove the $.trim if whitespace is counted as filled 
      return $.trim(this.value) === ""; 
     }); 

     if (!$emptyFields.length) { 
      $('#submitAccount').show(); 
     } else { 
      $('#submitAccount').hide(); 
     } 
    }); 
});? 
</script> 

Answer 1

我認爲您正在尋找類似的東西。下面顯示的是用於驗證表單中的所有下拉和文本控件。同樣，您需要遍歷所有checkboxes和其他控件並相應地設置count值。

function validateInputs() { 
    var count = 0; 

    // for all dropdowns with class as .dropdown 
    $('.dropDown').each(function (index, item) { 
     var selectedValue = $("option:selected", $(this)).val(); 
     if (selectedValue == "0" || $(this).find('option').length <= 1) { 
     count = 1; 
     $(this).css('border-color', '#ff0000'); // optional if you want to change the border color to indicate a required field 
    } 
    }, 0); 

    // for all textbox in the page 
    $('form input[type="text"]').each(function (index, item) { 
     if ($.trim($(this).val()) == "") { 
     count = 1; 
     $(this).css('border-color', '#ff0000'); // optional if you want to change the border color to indicate a required field 
     } 
    }, 0); 

    if (count == 1) { 
     $('#submitAccount').hide(); 
    } 
    else { 
     $('#submitAccount').show(); 
    } 
} 

，你可以調用函數從$(document).ready

$(function() { 
    validateInputs(); 
});