すべてのフォームフィールドが完成していない限り、jQueryを実行しないでください

Question

私は約40の質問からなる非常に大きなフォームを持っています。私は質問をセクションに分割しました。各セクションは10個で、それぞれはdivにラップされています。

私は、requeiredフィールドが完了してhaventは場合、私は、何とか言いたい

$('a.nextform').click(function(e){ 
     $('.hold-all').animate({"left": "-=690"}, 500); 
     e.preventDefault(); 
    }) 
$('a.backform').click(function(e){ 
     $('.hold-all').animate({"left": "+=690"}, 500); 
     e.preventDefault(); 
    }) 

内外にdivをスライドさせるjQueryのを使用して、ユーザーが次にクリックできるようにするいけないよ、これはjQueryを使って可能です？

Answer 1

ギブは、その空のならば、あなたは上= "無効" disabled属性を設定することができます

$('#name').val()

例

if($('#name').val() != ''){ 
//do 
} 
else 
{ 
//dont do 
} 

Answer 2

を使用してチェック例えば<input id='name' type='text'/>

、IDを入力しますJQueryのボタン入力：see w3schools$(button).attr('disabled', 'disabled')。ハンドラを$(form).submitに置き、preventDefaultを返してfalseを返すこともできます。上記のクリックハンドラーでreturn falseを実行して、クリックコードが実行されないようにすることもできます。

Answer 3

妥当性検査を段階に分割することもできます。つまり、入力がすべて現在のdivで有効になるまで、次のdivに移動しないでください。

jqueryのフォーム検証にはさまざまなプラグインがありますが、使用できるのはhttp://docs.jquery.com/Plugins/Validationです。もちろん

$('a.nextform').click(function(e){ 
if ("#myform").valid()) { 
$('.hold-all').animate({"left": "-=690"}, 500); 
    e.preventDefault(); 
} 
} 
... 

Answer 4

：

次に、あなたが上に移動するか、またはエラー、迅速なラフな例を表示するかどうかをチェックするために）（.validを使用することができます。それぞれの入力フィールドを繰り返します。フィールドセットを使用してそれらをグループ化し、.children（ 'input、textarea'）のようなものを使用できます - 各入力を検査し、与えられた入力の値があるかどうかを確認します。

Answer 5

すべてのフォームフィールドに対してこれを手動で記述すると、管理が難しくなります。フィールドをリストに追加または削除すると、すぐにプロセスの保守、管理、追跡が困難になります。

あなたが直面している問題は、一般的なものとも解か1である：「検証」

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

基本的には必須である任意のフィールドに「必要な」CSSクラスを追加します。フォーム上の検証プラグインを実行するか、フォームのコンテナを呼び出します。

ユーザーは次の呼び出し$（「＃フォームの質問」）をクリックする。検証（）

検証がtrueを返した場合、中の次のdivをスライドさせます。それがない場合はfalseを返します。また、validateプラグインは、検証に失敗したフィールドの最後に検証メッセージを追加したり、失敗した制約の検証サマリーメッセージを提供したりすることができます。いずれも最初のdivのフォームの後に表示されるように意図されているすべてのcompletemは、プラグインが、これらは空として見ていないと実行されませんされていますreach4thelasers @

http://jquery.bassistance.de/validate/demo/