フォームが完了していない場合はjquery

Question

すべてのフィールドに値があるかどうかを知る必要があります。値があれば、送信ボタンを有効にします。

私はプラグインを見てきましたが、私はどちらが必要なのか分かりません。または使用する必要があります。

フォームは、 入力、テキストボックス、およびドロップダウンの選択を使用します。

Answer 1

あなたは、このような単純なもの（注：私はこれをテストしていません）：何ができるプラグインを使用したくない場合は

/** 
* Checks to see if all of the values in a form are filled in. 
* 
* @param formId String the id of the form to check (without the #) 
* @return boolean True indicates all form fields are filled in 
*/ 
function checkForm(formId){ 

    var isFormComplete = true; 

    $('#' + formId).find('input,select,textarea').each(function(){ 
     var formValue = jQuery.trim($(this).val()); 

     if(!formValue){ 
      isFormComplete = false; 
     } 
    }); 

    return isFormComplete; 
} 

をして、いくつかのイベント（おそらくfocusまたはblur）上をこの関数を呼び出し、戻り値に基づいて送信ボタンを切り替えます。

Answer 2

jqueryを使用して、idを使用して必要なコントロールを選択できます。私はあなたに本質的にブラックボックスになるプラグインをサポートする必要がある以上、これをお勧めします。

マークアップ：

<input type="text" id="myTextBox" /> 
<input type="text" id="x" /> 
<select id="y" /> 

jqueryの：

var valid = $("#myTextBox").val() != "" && 
      $("#x").val() != "" && 
      $("#y").selectedIndex != 0; // if zero would be invalid for a select... 

あなたの送信ボタンが有効に基づいて有効/無効にすることができます。

Answer 3

var $submit = $('#a-form').find('input[type="submit"]'), 
    $inputs = $('#a-form').find('input, textarea').not('[type="submit"], [type="hidden"]'); 
$inputs.on('change', function() { 
    var error = false; 
    $.each($inputs, function (index, element) { 
     if ($(this).val() == '') { 
      error = true; 
      $(this).css({ backgroundColor : 'red' }); 
     } else { 
      $(this).css({ backgroundColor : 'white' }); 
     } 
    }); 
    if (error) { 
     $submit.prop('disabled', true); 
    } else { 
     $submit.prop('disabled', false); 
    } 
});​ 

これは、いずれかが空白の場合、フォームの各入力の値をチェックしchangeイベントのフォームは、ボタンが無効になって提出した入力にイベントハンドラをバインドします。空白入力のbackground-colorもredに変更されます。ここで

はデモです：http://jsfiddle.net/2zjbM/1/